이벤트 버블링
이벤트가 발생했을 때 가장 안쪽 타겟요소에서부터 시작해서 부모요소로 거슬러올라가며 전파되는 단계.
브라우저의 기본 이벤트 전파 방식.
타깃리스너 실행 이후 전파된다.
버튼 ✅"click" 이후,
<window>
↑
<document>
↑
<body> *addEventListener("click", ~) 가 부착되어있다면, (event.currentTarget)
↑
<div>
↑
<button> (event.target)
활용
- 이벤트 위임
부모 요소에 리스너를 한번만 등록해두면 자식요소의 이벤트 클릭을 감지할 수 있다.
-> 부모 요소 안에 이벤트를 감지해야하는 자식요소가 동적으로 여러개 생기는 경우 효과적 (ex. <ul>태그 안의 <li>들)
function attachTodoListEvents() {
const todoList = document.querySelector('#todoList'); // <ul>
if (!todoList) return;
// ul요소에 클릭이벤트 위임
todoList.addEventListener('click', function (e) {
// 클릭이벤트가 최초로 시작된 자식요소 찾고 '.todo-checkbox'에 일치하는 가까운 상위요소 추적
const clickedCheckbox = e.target.closest('.todo-checkbox');
// 일치하는 요소(체크박스)가 있으면 체크박스를 누른것으로 감지
if (clickedCheckbox) {
// -- 각 li의 체크박스에 추가하려던 이벤트 설정 --
// 누른 체스박스와 가까운 상위요소를 찾아 li(타겟 리스트) 추적
const clickedLi = clickedCheckbox.closest('.todo-item'); // <li>
if (!clickedLi) return;
const clickedTodoId = clickedLi.dataset.id;
toggleTodoComplete(clickedTodoId);
}
});
}
이벤트 캡쳐링
이벤트가 최상위 부모요소에서부터 시작해 타겟 요소까지 내려오며 전파되는 단계.
기본적으로 비활성화 되어있음. addEventListener 함수 세번째 옵션으로 활성화.
타깃리스너 실행 전에 캡쳐링이 시작된다. (타겟요소까지 이벤트가 전파 된 후에 타깃리스너 실행)
버튼 ✅"click" 이후,
<window>
↓
<document>
↓
<body> *addEventListener("click", ~) 가 부착되어있다면, (event.currentTarget)
↓
<div>
↓
<button> (event.target)
활용
- 부모요소에서 자식요소보다 먼저 이벤트를 처리해야할 때 사용 (ex. 모달창 바깥 영역 클릭 감지)
const modalBackdrop = document.getElementById("modal-backdrop");
const modal = document.getElementById("modal");
// 바깥 클릭 감지 - 캡처링 단계에서 감지 (true)
document.addEventListener(
"click",
(event) => {
if (!modal.contains(event.target)) {
console.log("모달 바깥 클릭됨 → 모달 닫기");
// -- 모달 닫는 동작 --
modalBackdrop.style.display = "none";
}
},
true
);
// 모달 내부 클릭은 stopPropagation 처리
modal.addEventListener("click", (event) => {
event.stopPropagation(); // 모달안에서의 클릭이 상위요소로 전파되지 않게 차단
console.log("모달 내부 클릭");
});하지만 이벤트 캡쳐링은 대부분 사용되지 않는다.
1. 브라우저의 기본 동작으로 이벤트버블링만 활성화 되어있음
2. 이벤트의 전파를 막고 싶을때 자식요소에서 stopPropagation()을 호출해도 캡쳐링 단계에서는 이미 부모리스너가 실행된 상태임 (제어 어려움)
* stopPropagation()은 상위요소로의 이벤트 전파를 막는다.
이러한 이유로 특수한 패턴이 아니라면 거의 사용되지 않는다.
'자바스크립트' 카테고리의 다른 글
| 소수점 숫자 연산시 주의사항 (0) | 2022.10.19 |
|---|---|
| 애니매이션 만드는 법 (0) | 2022.10.08 |
| 외부문서를 연결해주는 <link> (0) | 2022.10.07 |
| 소수 문제 (0) | 2022.09.23 |
| Math.random 랜덤숫자 활용하기 (0) | 2022.09.09 |