이벤트 버블링/캡쳐링

브라우저는 특정 화면 요소에서 이벤트가 발생(클릭/타이핑 등등..)시 기본적으로 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다.(이벤트 버블링이 기본이므로)
이 때 이벤트 전파방식은 버블링과 캡쳐링 2가지로 나눌 수 있다.

버블링

화면의 하위요소->상위요소로(최상위요소 body까지 전달) 이벤트를 전파하는 방식

<div class="1">
  <div class="2">
     <div class="3">
     </div>
  </div>
</div>

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

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

브라우저는 특정 화면 요소에서 이벤트가 발생시 기본적으로 그 이벤트를 최상위에 있는 화면 요소까지 전파시킨다.
따라서 최하위 div 태그 <div class="three"></div>를 클릭하면 3->2->1순으로 출력

캡쳐링

화면의 상위요소(최상위요소body부터 시작)->하위요소로 이벤트를 전파하는 방식

<div class="1">
  <div class="2">
     <div class="3">
     </div>
  </div>
</div>

let divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent,
    {capture:true}); 
    이번트리스너의 3번째인자에 {capture:true}추가하면 캡쳐링 방식으로 동작
}); // 1->2->3출력

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

event.stopPropagation()

나는 버블링이건 캡쳐링이건 관심이 없다!원하는 요소의 이벤트만 발생하게 하고 싶을때 사용

• 사용방법->이벤트 리스너의 2번째 인자에 있는 콜백함수 최상단에 event.stopPropagation()을 추가

div.addEventListener('click', logEvent)

function logEvent(event) {
	event.stopPropagation();
    이벤트 리스너의 콜백에 추가시 이벤트 전파를 막는다.
}

• 이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발+상위 요소로 이벤트 전달하는 것을 차단
• 이벤트 캡쳐의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 발생 + 하위 요소들로 이벤트 전달하는 것을 차단

이벤트 위임 - Event Delegation

• 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식
• 즉, 부모 요소에 이벤트를 하나만 주어 하위요소의 이벤트들을 감지

e.currentTarget => 이벤트를 등록한 요소(이벤트가 걸려있는 위치)를 의미
e.target=>이벤트가 발생한 위치를 의미

<h1>오늘의 할 일</h1>
<ul class="itemList">
	<li>
		<input type="checkbox" id="item1">
		<label for="item1">이벤트 버블링 학습</label>
	</li>
	<li>
		<input type="checkbox" id="item2">
		<label for="item2">이벤트 캡쳐 학습</label>
	</li>
</ul>

document.querySelector(".itemList").addEventListener("click", (e) => {
  alert('Clicked!');
  console.log(e.currentTarget, e.target);
});

<input type="checkbox" id="item2">클릭시
1.이벤트 버블링 의해 <ul className='itemList'></ul>이 이벤트 발생을 감지, alert('Clicked')발생
2.e.currentTarget => <ul class='itemList'></ul> 즉, 이벤트가 등록된 위치
3.e.target => <input id="item2" /> 즉, 이벤트 실제 발생위치

출처 : https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/