코드잇 스프린트 4기
5주 차 위클리 페이퍼
이벤트 버블링, 캡처링
자바스크립트를 이용해서 이벤트 핸들링을 다루다 보면 예상과는 다른 결과를 얻을 때가 있다.
<body>
<div id="parent" style="width: 500px; height: 500px; background-color: #798777">
parent
<div id="child" style="width: 250px; height: 250px; background-color: #bdd2b6">
child
</div>
</div>
<script>
const parent = document.querySelector('#parent');
const child = document.querySelector('#child');
const capturing = function (e) {
console.log(`캡처링: ${e.currentTarget.id}`);
}
const bubbling = function (e) {
console.log(`버블링: ${e.currentTarget.id}`);
}
parent.addEventListener('click', capturing, { capture: true });
child.addEventListener('click', capturing, { capture: true });
parent.addEventListener('click', bubbling);
child.addEventListener('click', bubbling);
</script>
</body>
child 구역을 눌렀을 때의 console 결과는 다음과 같다.
캡처링: parent
캡처링: child
버블링: child
버블링: parent
child 구역을 눌렀는데 parent가 console에 나오게 되는 이유는 이벤트 흐름에 있다.
이벤트에는 3가지 흐름이 있다.
· 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계.
· 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계.
· 버블링 단계: 이벤트가 상위 요소로 전파되는 단계.
Window -> Document -> -> ... -> 이벤트가 발생한 곳 -> ... -> -> Document -> Window
child 구역을 눌렀을 때 캡처링 단계가 진행되어 Window에서 child 구역까지 이벤트가 전파되면서 parent의 capturing 이벤트 핸들러가 동작하게 된다.
child 구역을 눌렀을 때 버블링 단계가 진행되어 Window까지 이벤트가 전파되면서 parent의 bubbling 이벤트 핸들러가 동작하게 된다.
캡처링은 기본이 false여서 활성화하려면 addEventListener의 세 번째 인자에 true 또는 { capture: true }를 넣어주면 된다.
버블링은 기본이 true여서 비활성화 하려면 event 객체의 stopPropagation 메서드를 호출하면 된다.
이벤트 위임
이벤트 위임은 이벤트 버블링을 활용하는 것이다.
<body>
<ul id="list">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<script>
const print = function (event) {
console.log(event.target);
}
// 이벤트 위임 적용 전
const items = document.querySelectorAll('.item');
for (const item of items) {
item.addEventListener('click', print);
}
// 이벤트 위임 적용 후
const list = document.querySelector('#list');
list.addEventListener('click', print);
</script>
</body>
item을 눌렀을 때 이벤트가 동작하게 할 때 반복문을 돌면서 li 태그 하나하나에 addEventListener를 등록하는 것이 아니라 부모요소인 ul 태그 하나에 addEventListener를 등록하는 것이다.
감사합니다.
'코드잇 스프린트 4기 > 위클리 페이퍼' 카테고리의 다른 글
| [JavaScript] 비동기 문제 (0) | 2024.02.04 |
|---|---|
| [HTTP] HTTP 메서드 (0) | 2024.01.27 |
| [JavaScript] var, let, const (0) | 2024.01.20 |
| [JavaScript] 얕은 복사, 깊은 복사 (0) | 2024.01.20 |
| [Git] Git-flow (0) | 2024.01.12 |
댓글