이벤트 전파

Event Bubble

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

Event Capture

이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.

이벤트 전파 막는 방법

event.stopPropagation로 버블링의 경우에는 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트 전파를 막는다. 그리고 이벤트 캡처의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전파하지 않는다. a 태그의 href로 URL 이동은 막지 못하는데 event.preventDefault와 같이 사용하여 URL이동 방지와 이벤트 전파를 막을 수 있다.

이벤트 전파

이벤트 발생 시 부모 또는 자식 노드에게 이벤트가 전파되는 것을 이벤트 전파라고 한다.

이벤트 위임

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식이다.

<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>

const itemList = document.querySelector(".itemList");
itemList.addEventListener("click", function (event) {
  alert("clicked");
});

li를 한번 더 추가 할 때 추가된 요소는 이벤트 발생이 일어나지 않는다. 이때 상위 요소인 ul에 이벤트를 위임하여 하위 요소에서 이벤트 발생을 제어가 가능해진다.

예시
https://codesandbox.io/s/ibenteujeonpa-goqjd?file=/src/index.js