DOM 프로퍼티에서의 이벤트 전파 방식
- 브라우저는 처리해야할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다.
- 특정 타입의 이벤트에 반응하여 어떤 일을 수행하도록 이벤트가 발생했을 때 호출될 함수인 이벤트 핸들러를 브라우저에게 알려 호출을 위임하는 것을 이벤트 핸들러 등록이라고 한다.
- HTML의 속성이나 DOM프로퍼티를 활용하거나 Element.addEventListener() 를 통해서 이벤트 핸들러를 등록할 수 있다.
- 이벤트가 발생하면 이벤트 핸들러의 첫 번째 파라미터에는 자동으로 이벤트 객체가 전달되는데, 이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 갖고있다.
- 이러한 이벤트가 자식에서 부모 요소로, 혹은 부모 요소에서 자식으로 전파되기도 하는데 이것을 이벤트 버블링 또는 이벤트 캡쳐링 이라고 부른다.
1. 이벤트 버블링 (Event Bubbling)
<div onclick="alert('div에 할당한 핸들러!')">
<em><code>EM</code>을 클릭했는데도 <code>DIV</code>에 할당한 핸들러가 동작합니다.</em>
</div>
//해당 코드를 실행하면 결과적으로 EM을 클릭했는데도 DIV에 할당한 핸들러가 동작하게 된다.위의 코드처럼
<em>을 클릭했는데<div>에 할당한 핸들러가 작동하는 것을 이벤트 버블링 이라고 부른다.
이벤트 버블링의 원리는 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하면서 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하게 된다.
이벤트 버블링은 이벤트 객체의 stopPropagation 메로드로 전파를 막을 수 있다.2. 이벤트 캡쳐링 (Event Capturing)
이벤트 캡쳐링이란 실제 코드에서 자주 쓰이지는 않지만, 이벤트 버블링과는 반대의 흐름으로 진행되는 이벤트 전파 방식 이다.
캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener 의 세번째 프로퍼티에 true 또는 { capturing: true } 를 전달하면 된다.3. 이벤트 위임 (Event Delegation)
위에서 언급한 버블링 개념들을 활용하면 훨씬 효과적인 이벤트 관리를 할 수 있게 된다. 예를 들어 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수 있게 되는데, 이렇게 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 이벤트 위임이라고 부른다.
이벤트 위임을 잘 활용하면 훨씬 더 효율적으로 이벤트를 다룰 수 있게 된다.
