Event Capture & Event Bubble

✨ 버블링

한 요소에서 이벤트가 발생하게 되면, 해당 요소의 이벤트 핸들러가 동작하고 이어서 부모의 이벤트 핸들러가 동작하게 된다. 이는 가장 최상단 부모 노드까지 전달된다. 때문에 특정 요소에서 이벤트 발생 시 부모 컨테이너가 자식컨테이너에서 일어나는 모든 이벤트를 들을 수 있다는 것이 자바스크립트의 특징이다.

 

아래 화면을 보면  child -> father -> grandFather 순으로 동작하는 것을 알 수 있다. 즉 자식 객체의 이벤트가 발생하고 부모의 이벤트가 동작하는 것을 볼 수 있다. 이렇게 동작하는 것을 이벤트 버블링이라고 한다.

✨ 캡처링

캡처링은 버블링과는 반대 방향으로 부모 컨테이너에서 이벤트가 발생한 해당 요소를 찾아내려가는 이벤트 전파방식이다. 위의 소스코드에서 capture : true 라는 것만 추가해주면 어떻게 발생하는지 확인할 수 있다.

 

이번에는 grandFather -> father -> child 순서로 진행된 것을 확인할 수 있다.

event가 전파되는 방식을 이용해 우리는 더 편하게 이벤트를 조작하여 사용할 수 있다. 다음번에는 이 이벤트 버블링을 활용한 이벤트 위임을 다뤄보겠다.