📚이벤트 버블링, 캡쳐링, 위임

📕 이벤트 버블링

💡 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성

아래의 코드는 위의 그림을 예시로 든 코드이다.

<body>
	<div class="one">
		<div class="two">
			<div class="three">
			</div>
		</div>
	</div>
</body>

var divs = document.querySelectorAll('div');
  divs.forEach(function(div) {
      div.addEventListener('click', logEvent);
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

위의 코드를 실행시키고 <div class="three"> 영역을 클릭하면 아래와 같은 결과가 실행된다.

three class명을 가진 div를 클릭했을 뿐인데 왜 3개의 이벤트가 실행이 됬을까

그 이유는 브라우저의 이벤트 감지하는 방식 때문이다.

브라우저는 특정 화면 요소에서 이벤트가 발생하면 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파하는 특징이 있다.

이와 같이 하위에서 상위 요소로 이벤트 전파 방식을 이벤트 버블링이라고 한다.

---

📕 이벤트 캡쳐

💡 이벤트 버블링과 반대인 상위에서 하위로 진행되는 이벤트 전파 방식

이벤트 캡쳐의 구현 방법은 addEventListener() API에서 옵션 객체에 capture:true를 설정해주면 된다

divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true
	});
});

---

📕 이벤트 위임

💡 하위 요소에 각각 이벤트를 부여하는게 아닌 상위에서 하위 요소의 이벤트를 제어하는 방식

사용자의 액션에 의해 이벤트 발생 시 이벤트 버블링에 의해 document 레벨까지 버블링 되어 올라가는데 이러한 특징때문에 자식 엘리먼트에서 발생하는 이벤트를 부모 엘리먼트가 감지할 수 있다.

자식 요소에 하나하나 모든 이벤트를 주는것이 아닌 부모에게 이벤트를 위임하는 방식

<html>
  <body>
    <div class="menu">
      <button class="items">첫번째 버튼</button>
      <button class="items">두번째 버튼</button>
      <button class="items">세번째 버튼</button>
    </div>
    <script>
      for (const item of document.querySelectorAll(".items")) {
        item.addEventListener("click", (e) => {
          alert(`${e.target.innerText}입니다.`);
        });
      }
    </script>
  </body>
</html>

위의 코드는 버튼 클릭시 몇번째 버튼인지 확인하는 코드이다.
그러나 addEventListener를 여러번 호출하기 때문에 메모리 측면서 비효율적이고 성능이 떨어질 수 있다.

그래서 이벤트 버블링을 활용하면 부모 엘리먼트에 이벤트를 위임하는 코드를 작성해보자

<script>
      const menu = document.querySelector(".menu");
      menu.addEventListener("click", (e) => {
        alert(`${e.target.innerText}입니다.`);
      });
    </script>

📖 이벤트 위임의 장점

1. 동적인 엘리먼트에 대한 이벤트 처리가 수월
2. 상위 엘리먼트에서만 이벤트를 관리하기 때문에 하위 엘리먼트는 자유롭게 추가 삭제 가능
3. 메모리 사용량이 줌
4. 한 곳에서 관리하기 때문에 각각의 엘리먼트를 여러 곳에 등록하여 관리하는 것보다 수월

---

📕 출처

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
https://velog.io/@hovelopin/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84-ax11zcnh