이벤트 버블링, 캡처링, 그리고 위임은 웹 개발에서 이벤트 처리와 관련된 중요한 개념들입니다.
- 이벤트 버블링(Event Bubbling):
- 이벤트 버블링은 HTML 요소들이 중첩된 구조에서 발생한 이벤트가 가장 내부의 요소부터 시작하여 부모 요소 방향으로 전파되는 메커니즘입니다.
- 즉, 내부 요소에서 발생한 이벤트가 외부로 전파되며, 이벤트 핸들러는 부모 요소에서부터 순차적으로 실행됩니다.
- 이벤트 캡처링(Event Capturing):
- 이벤트 캡처링은 이벤트 버블링과 반대로 부모 요소에서 시작하여 내부 요소 방향으로 이벤트가 전파되는 메커니즘입니다.
- 캡처링 단계에서 이벤트 핸들러는 최상위 부모 요소부터 내부로 내려가며 실행됩니다.
- 이벤트 위임(Event Delegation):
- 이벤트 위임은 동적으로 생성되는 요소들에 대한 이벤트 처리를 효율적으로 관리하기 위한 패턴입니다.
- 상위 요소에 이벤트 핸들러를 등록하여 하위 요소에서 발생하는 이벤트를 상위 요소에서 하나의 핸들러로 처리합니다.
- 이를 통해 많은 수의 하위 요소에 개별적인 이벤트 핸들러를 등록하는 대신 하나의 핸들러로 효율적으로 관리할 수 있습니다.
요약하자면, 이벤트 버블링은 내부 요소에서 시작하여 부모 요소로 전파되는 이벤트 전달 방식이며, 이벤트 캡처링은 그 반대 방향으로 전파되는 방식입니다. 이벤트 위임은 동적 요소에 대한 이벤트 처리를 효율적으로 관리하기 위해 상위 요소에 핸들러를 등록하는 패턴을 의미합니다.
이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용됩니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다.
공통 조상에 할당한 핸들러에서 event.target
을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다.
이벤트 위임은 다음과 같은 알고리즘으로 동작합니다.
- 컨테이너에 하나의 핸들러를 할당합니다.
- 핸들러의
event.target
을 사용해 이벤트가 발생한 요소가 어디인지 알아냅니다. - 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링합니다.
이벤트 위임의 장점은 다음과 같습니다.
- 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약됩니다.
- 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없기 때문에 코드가 짧아집니다.
innerHTML
이나 유사한 기능을 하는 스크립트로 요소 덩어리를 더하거나 뺄 수 있기 때문에 DOM 수정이 쉬워집니다.
이벤트 위임에도 물론 단점이 있습니다.
- 이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 합니다. 하지만 몇몇 이벤트는 버블링 되지 않습니다. 그리고 낮은 레벨에 할당한 핸들러엔
event.stopPropagation()
를 쓸 수 없습니다. - 컨테이너 수준에 할당된 핸들러가 응답할 필요가 있는 이벤트이든 아니든 상관없이 모든 하위 컨테이너에서 발생하는 이벤트에 응답해야 하므로 CPU 작업 부하가 늘어날 수 있습니다. 그런데 이런 부하는 무시할만한 수준이므로 실제로는 잘 고려하지 않습니다.
'IT 학습 > Javascript' 카테고리의 다른 글
SEO (검색엔진 최적화) (0) | 2023.08.21 |
---|---|
Next.js의 데이터 패칭 (0) | 2023.08.17 |
ES5 vs ES6 (0) | 2023.08.10 |
자바스크립트 네이밍을 효율적으로 작성하기 (0) | 2022.09.15 |
preload , beforeunload를 활용하자 (0) | 2022.09.07 |