[Javascript] querySelectorAll일때 addEventListener적용하기

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="" 을 쓰면되는데 굳이 이벤트를 따로 하는 이유는

상황에 따라 다른 이벤트를 발생할수있고

동일한 이벤트가 발생하는 버튼이 여러개있을때 버튼에 다 직접 입력하는것보다

위와 같이 작성하는게 효율성 에서 좋기 때문이다!