자바스크립트 - 이벤트 버블링, 캡쳐링, 위임

이벤트 버블링 : 특정 요소에 이벤트가 발생했을 때 해당 이벤트가 그 요소의 조상들에게까지 전달되는 현상

---

 

이벤트 흐름 순서

이벤트가 발생하면 1. 캡쳐링 단계 → 2. 타켓 단계 → 3. 버블링 단계가 일어난다

1. 캡쳐링 단계

브라우저는 이벤트가 발생한 좌표를 알아낸다. (이벤트 타겟 프로퍼티는 이벤트 발생 위치를 담고 있다.) 

그럼 그 좌표에서 제일 깊이 있는 요소를 타겟 이라고 하고

 

윈도우부터 타겟을 찾아 들어가는 동안 만나는 요소들(=타겟의 부모 요소들)에게 이벤트 리스너가 있는지 확인한다.

 

- 이벤트 리스너가 없는 경우 : pass

- 이벤트 리스너가 있는 경우 : 캡쳐 사용 여부를 확인한다 

캡쳐 사용 여부가 true인 경우에만 캡쳐링 단계에서 이벤트 리스너를 실행시킨다 (그 외는 버블링 단계에서..)

 

*캡쳐링 단계에서 이벤트 발생시키는 방법

addEventListener 세번째 아규먼트에 true 또는 {capture:true} 전달

 

2. 타겟 단계

타켓에서 이벤트 리스너를 실행시킨다.

 

3. 버블링 단계

다시 최상위 객체까지 거슬러 올라간다.

다시 만나는 부모 요소들 중 (캡쳐링 단계에서) 이벤트 리스너가 있음을 확인한 요소들의 이벤트 리스너를 실행시킨다.

 

*버블링을 막는 메서드 : event.stopPropagation()

상위 범위에서 이벤트를 발생시켜야할때 해당하는 범위만 이벤트 결과를 얻지 못하게 될 수 있어서 사용을 지양한다.

 

▼예시 참조하기

https://velog.io/@moonheekim0118/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81

[JavaScript] 이벤트 위임

 

---

버블링을 활용한 이벤트 위임 Delegation : 공통 조상에 이벤트핸들러 하나만 사용해도 여러 요소에 적용을 할 수 있음

 

　⇔ 여러 요소에 이벤트 처리를 할때, 각각에 이벤트 리스너를 등록하기 : 비효율적임

<ul id="menu">
  <li><button id="file">파일</button></li>
  <li><button id="edit">편집</button></li>
  <li><button id="view">보기</button></li>
</ul>

 

document.getElementById("file").addEventListener("click", function(e) {
  // 파일 메뉴 동작
});
document.getElementById("edit").addEventListener("click", function(e) {
  // 편집 메뉴 동작
});
document.getElementById("view").addEventListener("click", function(e) {
  // 보기 메뉴 동작
});

//이벤트 위임을 사용한 코드
document.getElementById("menu").addEventListener("click", function(e) {
  var target = e.target;
  if (target.id === "file") {
    // 파일 메뉴 동작
  } else if (target.id === "edit") {
    // 편집 메뉴 동작
  } else if (target.id === "view") {
    // 보기 메뉴 동작
  }
});

https://ui.toast.com/weekly-pick/ko_20160826

왜 이벤트 위임(delegation)을 해야 하는가?