JavaScript 08 - 이벤트 버블링, 이벤트 캡처링

이벤트 버블링

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 것이 최상단의 부모 요소를 만날 때까지 반복되는 현상

 

이벤트 버블링

 

---

이벤트 캡처링

 

버블링과의 반대 개념으로, 최상위 태그에서 해당 태그를 찾아 내려가는 

이벤트 캡처링

---

이벤트 전파 방지

let clickEvent = (event) => {
	event.stopPropagation();
};

 

event.stopPropagation()을 사용하여 해당 타깃의 이벤트만 발생하도록 제어할 수 있다.

---

이벤트 위임

이벤트 발생 시 이벤트 버블링에 의해 document 레벨까지 버블링되어 올라가는데, 이를 활용하여 자식 엘리먼트 하나하나에 모든 이벤트를 주는 것이 아닌 부모에게만 이벤트를 위임하여 자식 엘리먼트를 제어하는 방법

 

장점

1. 동적인 엘리먼트에 대한 이벤트 처리 수월

2. 상위 엘리먼트에서만 이벤트를 관리하기 때문에 하위 엘리먼트는 자유롭게 추가 및 삭제 가능

3. 메모리 사용량이 줄어듦

4. 동일한 이벤트에 대해 한 곳에서 관리하기 때문에 각각의 엘리먼트를 여러 곳에 등록하여 관리하는 것보다 수월

 

 

참고 블로그

[JavaScript] 이벤트 버블링과 캡처링! (tistory.com)

[JS] 이벤트 위임 (velog.io)

이벤트 버블링과 캡처링에 대한 정리 (velog.io)