[JavaScript] addEventListener() , 이벤트리스너 등록

addEventListener() , 이벤트리스너 등록

addEventListener() 는 document내에 특정요소에 event를 등록할때 사용합니다.

간단한 사용예제는 아래와 같습니다.

js

		var btn = document.getElementById("btn1");

		btn.addEventListener("click",btnClick,false);
		
		function btnClick(e){
			alert("Click!");
		}	

html

위의 예제는 한개의 버튼에 이벤트를 등록하는 방법입니다.

그런데 태그에 직접 onclick="" 을 쓰면되는데 위와같이 하는 이유는 상황에 따라 다른 이벤트를 발생할수있고

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

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

아래의 예제에서는 여러개의 버튼에 이벤트리스너를 등록하였습니다.

js

		var cols = document.querySelectorAll('#cols .btn');  
		
		[].forEach.call(cols,function(col){
			col.addEventListener("click",click,false); 
		});

		function click(e){
			window.alert(this.innerHTML);
		}

html

위의 예제에서는 class="btn" 버튼을 querySelectorAll 로 가져와 반복문을 사용하여 이벤트리스너를 등록하였습니다.

querySelectAll이 궁금하면 아래링크를 타세요.
[JavaScript] querySelector , querySelectorAll 자바스크립트 요소접근

위와같이 작성할경우 버튼추가시 똑같은 코드를 다시 적을필요가 없이 자동으로 이벤트리스너가 등록됩니다.

따라서 유지보수 측면에서 좀더 좋은코드입니다.

또한 HTML은 문서내용을 보여주고 Script 에서는 문서를 조작하는 서로의 역활에 충실할수있습니다.