event는 흔히 어떤 이벤트가 있었다 라고 말할 때와 마찬가지로, 무언가가 일어났다는 신호다.
DOM에서 사용되는 이벤트는 종류가 다양한데, 여기서는 간단하게 click
이벤트 하나로 말해보고자 한다.
모든 DOM 노드는 이벤트를 전달할 수 있다. 이런 이벤트에 반응하려면, 이벤트를 트리거한 DOM 요소에 event handler를 연결해야 한다. button
에 click
이벤트를 트리거하기까지의 과정은 이러하다.
button
렌더링button
을 clickclick
이벤트 전달click
이벤트 캡쳐click
이벤트 반응 - 버블링이벤트가 DOM 트리 상에서 흐르는 것을 이벤트 전파(event propagation)라고 한다.
이벤트 전파 과정을 이해하기 위해서 DOM 이벤트의 lifecycle을 살펴봤다.
버튼을 click
했을 때의 과정은 이렇게 진행된다.
button
이 target이기 때문에 DOM tree를 따라 해당 타깃까지 내려간 후, 이벤트가 버블링되어 다시 최상단까지 DOM tree를 타고 올라온다.
이런 현상이 발생하는 이유는, 이벤트는 window, document, html ... target element 이런 식으로 부모와 자식 관계를 유지하기 때문이다.
button의 부모가 div라면 button을 클릭할 때 div도 함께 클릭되는 것이다.
아래의 모던 JavaScript 튜토리얼의 예시를 보면, form > div > p 태그 순서대로 DOM tree가 있다.
p를 클릭해보면 this
는 form이고, target
은 p 인 것을 확인할 수 있다. 이벤트가 걸린 곳은 form이기에 this는 항상 form이고, target은 form의 자손 혹은 본인이 될 수 있다.
이렇듯 한 요소에 이벤트가 발생하면,
이렇게 작동하게 된다. 이 현상을 이벤트 버블링이라고 한다.
여기서 capture
는 MDN의 문서를 참고하면 이해하기 쉽다.
MDN - EventTarget.addEventListener 를 보면, addEventListener
의 3번째 매개변수가 useCapture 인 것을 볼 수 있다.
Event Bubbling과는 반대 순서로 이뤄지는 개념으로, 조상 Node에서 자식 순으로 이벤트가 Capture
된다.
target element에서 발생한 이벤트가 부모, 조상 노드까지 영향을 끼치게 된다. 이벤트를 컨트롤 할 때 이런 현상을 방지하는 것도 필요하다.
...
event.stopPropagation();
...
event.stopPropagation()
메소드를 사용해 원하는 곳에서 이벤트 전파를 차단할 수 있다.
버블링 시에는 타깃에서만 이벤트가 발생되게 하고, 캡처링 시에는 타깃 기준으로 최상단에서만 이벤트가 발생하게 한다.
https://ko.javascript.info/events
도서 <모던 자바스크립트 Deep Dive>