Event Propagation
- 이벤트 흐름에는 3가지 단계가 있음
- 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
- 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
- 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계
- 위와 같은 DOM 트리에서
<td>를 클릭하면 이벤트가 최상위 조상부터 시작해서 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파됨(버블링 단계)
버블링(bubbling) 단계
- 버블링의 원리
- 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작함
- 이어서 부모 요소의 핸들러가 동작함
- 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작함
Note
- 거의 모든 이벤트는 버블링됨
- 버블링되지 않는 이벤트
- 포커스 이벤트 :
focus,blur- 리소스 이벤트 :
load,unload,abort,error- 마우스 이벤트 :
mouseeter,mouseleave
버블링 중단하기
event.stopPropagation()- 요소에 할당된 핸들러가 이벤트를 처리한 후, 버블링을 중단시킬 수 있음
- 한 요소의 특정 이벤트를 처리하는 핸들러가 여러 개인 경우, 핸들러 중 하나가 버블링을 멈추더라도 다른 핸들러는 여전히 동작함
event.stopImmediatePropagation()- 버블링을 멈추고, 요소에 할당된 특정 이벤트를 처리하는 모든 핸들러가 동작하지 않음
Note
- 꼭 필요한 경우를 제외하고는 버블링을 막지 않기
타깃(target) 단계
- 타깃(target)
- 이벤트가 발생한 가장 안쪽 요소
event.target을 사용하여 접근 가능함
event.target- 실제 이벤트가 시작된 타깃 요소
- 버블링이 진행되어도 변하지 않음
event.currentTarget(=this)- 현재 실행중인 핸들러가 할당된 요소
캡처링(capturing) 단계
- 캡처링 단계
- 이벤트가 하위 요소로 전달되는 단계
- 캡처링 단계를 이용하는 경우는 흔치 않음
- 캡처링 단계에서 이벤트를 잡아내려면,
addEventListener의capture옵션을true로 설정해야함capture옵션이false(default)이면, 핸들러는 버블링 단계에서 동작함capture옵션이true이면, 핸들러는 캡처링 단계에서 동작함
element.addEventListener(..., {capture: true})
// or
element.addEventListener(..., true)Event Delegation
- 이벤트 위임(Event Delegation)
- 비슷한 방식으로 여러 요소들을 다뤄야 할 때 사용되는 이벤트 핸들링 패턴
- 요소마다 핸들러를 할당하지 않고 요소의 공통 조상에 이벤트 핸들러 하나만 할당해서, 여러 요소를 한꺼번에 다룰 수 있음
- 이벤트 위임의 동작 과정
- 컨테이너에 하나의 핸들러를 할당함
- 핸들러의
event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냄 - 원하는 요소에서 이벤트가 발생했다는 것이 확인되면 이벤트를 핸들링함
<div id="menu">
<button data-action="save">저장하기</button>
<button data-action="load">불러오기</button>
<button data-action="search">검색하기</button>
</div>
<script>
class Menu {
constructor(element) {
this._element = element;
element.onclick = this.onClick.bind(this);
}
save() {
alert('저장하기');
}
load() {
alert('불러오기');
}
search() {
alert('검색하기');
}
onClick(event) {
let action = event.target.dataset.action;
if (action) {
this[action]();
}
}
}
</script>이벤트 위임의 장단점
- 이벤트 위임의 장점
| 장점 | 원인 | 결과 |
|---|---|---|
| 장점 1 | 여러 개의 요소가 아닌 공통 조상 요소에만 핸들러 할당하면 됨 | 초기화가 단순해짐, 메모리 절약됨 |
| 장점 2 | 요소를 추가/제거할 때 해당 요소 핸들러를 추가/제거하지 않아도 됨 | 코드의 길이가 짧아짐 |
| 장점 3 | innerHTML이나 유사한 기능을 하는 스크립트로 요소 덩어리를 추가/제거 가능함 | DOM 수정이 쉬워짐 |
- 이벤트 위임의 단점
| 단점 | 원인 | 결과 |
|---|---|---|
| 단점 1 | 이벤트 위임을 사용하려면 이벤트가 반드시 버블링되어야 함 | 버블링되지 않는 이벤트들이 있음 |
| 단점 2 | 컨테이너 수준에 할당된 핸들러가 모든 하위 요소에서 발생하는 이벤트에 응답해야 함 | CPU 작업 부하가 늘어날 수 있음 (무시할 만한 수준임) |
