이벤트 버블링

Updated: 2025-01-22

이벤트 버블링

이벤트 버블링은,
이벤트가 발생한 요소에서 시작하여 부모 요소로 순차적으로 전파되는 것을 말합니다.

이 매커니즘을 사용하면 따로 자식 요소에 이벤트를 추가할 필요 없이 부모의 이벤트 하나로 다 적용할 수 있습니다.

예시:

1<!DOCTYPE html>
2<html lang="ko">
3<head>
4  <meta charset="UTF-8">
5  <title>오늘 할 일</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <div class="main">
10    <h2 class="title">오늘 할 일</h2>
11    <ul id="to-do-list">
12      <li class="item">자바스크립트 공부하기</li>
13      <li class="item">고양이 화장실 청소하기</li>
14      <li class="item">고양이 장난감 쇼핑하기</li>
15    </ul>
16  </div>
17  <script src="index.js"></script>
18</body>
19</html>

1const toDoList = document.querySelector('#to-do-list');
2
3function updateToDo(event) {
4  if(event.target.classList.contains('item')){
5      event.target.classList.toggle('done');
6  }
7}
8
9toDoList.addEventListener('click', updateToDo);
10
11// 테스트 코드
12const newToDo = document.createElement('li');
13newToDo.textContent = '가계부 정리하기';
14newToDo.classList.add('item');
15toDoList.append(newToDo);

설명:

먼저 updateToDo()라는 함수를 만들고 파라미터를 전달 받을때 ‘item’ 클래스명을 포함 했으면 ‘done’이라는 클래스명을 추가하는 함수입니다.

그 다음 부모요소인 toDoList에 이벤트를 추가하면 모든 자식요소도 클릭시 부모 요소의 이벤트가 실행 됩니다.

원래 라면 각 자식 요소의 이벤트를 추가해 작동하게 만들 수 있지만, 그렇게 되면 새로 추가된 요소들은 작용되지 않기 때문에 이러한 이벤트 버블링을 활용하여 쓰는 것입니다.

YLOG

이벤트 버블링

이벤트 버블링

예시:

설명: