Event Handler

Event

화면 크기 조절, 마우스 스크롤, 마우스 드래그 앤 드랍, 선택 등등

HTML element 별로 어떤 이벤트가 발생했을 때 특정 행위를 하고 싶다면,

대상 element를 찾아서 특정 행위를 등록하면 된다.

 

 

Event 등록 - addEventListener

element.addEventListener( 이벤트 종류, 특정행위(함수) )

이 때 적은 함수는 Event Handler 또는 Event Listener라고 한다.

이 함수들은 이벤트가 발생할 때 실행되므로 콜백함수다.

var el = document.querySelector(".outside");
el.addEventListener("click", function(){
//do something..
}, false);

 

이벤트 종류는 다음 사이트에 자세히 정리되어 있습니다.

developer.mozilla.org/ko/docs/Web/Events

 

 

 

 

 

 

Event Object(객체)

브라우저가 이벤트 리스너를 호출할 때,

사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해서

리스너 함수에 전달합니다.

따라서 이벤트 리스너 안에서는 이벤트 객체를 활용해서 추가적인 작업을 할 수있게 됩니다.

 

가장 많이 쓰이는 건 evenet.target입니다. 이는 이벤트가 발생한 element를 가리킵니다.

element도 객체이므로 안에 nodeName이나 classname과 같이

element가 가진 속성을 사용할 수 있습니다.

 

var el = document.getElementById("outside");
el.addEventListener("click", function(evt){
 console.log(evt.target);
 console.log(evt.target.nodeName);
}, false);