[JavaScript] Event

Event

브라우저에는 많은 이벤트가 발생한다.

브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.

HTML 요소 별로 어떤 이벤트가 발생했을 때, 특정 행위를 하고 싶다면, 대상 요소를 찾고 행위를 등록하면 된다.

이를 자바스크립트로 구현할 수 있다.

Event 등록

이벤트 등록 표준방법으로, addEventListener 메서드를 사용할 수 있다.

var el = document.getElementById("outside");
 
el.addEventListener("click", function(e) {
    console.log("clicked!", e);
}, false);

addEventListener 함수의 두 번째 인자는 함수다. 

이 함수는 나중에 이벤트가 발생할 때, 실행되는 함수로 이벤트핸들러 또는 이벤트리스너라고 한다.

Event Handler(Event Listener) 콜백함수는 이벤트가 발생할 때 실행된다.

콜백함수의 경우 이벤트 정보를 매개변수로 받을 수 있다.

Event 객체

이벤트리스너가 실행될 때 어떤 이벤트에 의해서 실행되었는지, 이벤트 객체를 매개변수로 생성한다.

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

가장 많이 사용되는 것은 event.target이며, 해당 이벤트가 발생한 element를 가리킨다.

element도 객체이므로 그 안에 className, id 등의 element가 가지는 속성을 사용할 수 있다.

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

이외에도 target에 대해 더 알아보고 싶으면 아래와 같이 debugger를 걸고 개발자도구에서 확인할 수 있다.

var el = document.getElementById("outside");
 
el.addEventListener("click", function(e) {
    var target = e.target;
    debugger;
});

참고자료

https://www.edwith.org

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

https://developer.mozilla.org/en-US/docs/Web/Events