DEVLOG
[Javascript] querySelectorAll일때 addEventListener적용하기 본문
frontend/javascript
[Javascript] querySelectorAll일때 addEventListener적용하기
meroriiDev 2021. 1. 20. 15:28728x90
반응형
addEventListener() 는 document내에 특정요소에 event를 등록할때 사용한다.
var btn = document.querySelector(".btn1");
btn.addEventListener("click",btnClick,false);
function btnClick(e){
alert("Click!");
}
단, 위와 같은 방법으로 작성하면 한개의 버튼에만 이벤트를 등록하는 방법이 된다.
그래서 querySelector로 여러개를 선택한 후 addEventListener를 적용하면?
/*xxxxxxxxxxxxxxxx나쁜예xxxxxxxxxxxxxxxx*/
var btn = document.querySelectorAll(".btn1");
btn.addEventListener("click",btnClick,false);
function btnClick(e){
alert("Click!");
}
오류가 발생한다.
그래서 반복문을 통해 각 버튼마다 이벤트를 적용시켜주는 것으로 해결할 수 있다.
var cols = document.querySelectorAll('#cols .btn');
[].forEach.call(cols,function(col){
col.addEventListener("click",click,false);
});
function click(e){
alert("Click!")
}
+ 그런데 태그에 직접 onclick="" 을 쓰면되는데 굳이 이벤트를 따로 하는 이유는
상황에 따라 다른 이벤트를 발생할수있고
동일한 이벤트가 발생하는 버튼이 여러개있을때 버튼에 다 직접 입력하는것보다
위와 같이 작성하는게 효율성 에서 좋기 때문이다!
728x90
반응형
'frontend > javascript' 카테고리의 다른 글
[Javascript] setCookie, getCookie 브라우저 쿠키관련세팅하기 (+ 쿠키 저장, 조회, 삭제) (0) | 2021.02.17 |
---|---|
[Javascript] .hasClass()를 javascript로 바꾸기 (1) | 2021.01.20 |
익스플로러에서 includes함수가 동작하지 않는다면? (2) | 2021.01.19 |
[SheetJS] javascript로 테이블을 엑셀파일로 다운로드하기 (5) | 2021.01.13 |
엘리먼트의 텍스트를 변경하는 다양한 방법 / createTextNode, innerHTML, textContent, insertAdjacentHTML (0) | 2020.12.11 |
Comments