🔵이벤트 버블링이란?
- 이벤트 버블링은 이벤트가 발생한 요소로부터 마치 기포처럼 위로 올라 상위 요소들에게도 이벤트가 발생하게 되는 현상을 말한다.
<body>
<div class="one">one
<div class="two">two
<div class="three">three
</div>
</div>
</div>
</body>const divs = document.querySelectorAll('div')
const logEvent = ()=>{
console.log(event.currentTarget.className);
}
divs.forEach((v)=>v.addEventListener('click', logEvent))
- three, two, one 순서로 상위요소가 되는 html 코드를 짜보았다. 3개의 div 태그에 모두 이벤트 핸들러를 등록한 상태고, three를 누르게 되면 아래와 같은 결과가 나온다. 나는 분명 three 요소만 눌렀는데 two, one 까지 모두 이벤트가 발생하여 출력되는 것을 확인할 수 있다. 이러한 현상을 이벤트 버블링이라고 한다.
🔵이벤트 캡처링이란?
- 캡처링은 버블링의 반대라고 생각하면 된다. 즉, 최상위 요소에서 이벤트가 발생한 지점까지 내려가는 느낌이다.
divs.forEach((v)=>v.addEventListener('click', logEvent, {capture:true}))
➡️ three 요소를 클릭했더니 버블링 현상과 반대로 출력되었다.
🔵이러한 현상들이 싫다면?
const logEvent = ()=>{
event.stopPropagation();
console.log(event.currentTarget.className);
}➡️ event 객체의 stopPropagation 메소드를 활용하면 전파를 막아주고, 이벤트가 발생한 요소만 실행이 된다. 단, 캡처링은 이벤트를 발생시킨 요소가 아닌 최상위 요소가 동작하게 된다.
🔵이벤트 위임
- 이벤트 위임은 하위 요소들에 각각 이벤트 리스너를 등록하지 않고, 상위 요소에서 하위 요소들을 제어할 수 있는 방식이다.
<h1>TO DO LIST</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 inputs = document.querySelectorAll('input');
const logEvent = ()=>{
alert('clicked')
}
inputs.forEach((v)=>v.addEventListener('click', logEvent))
➡️위 체크 박스를 클릭하면 'checked' 문구의 alert 창이 뜨게 된다. 여기서 자바스크립트 코드로 li 요소를 추가해도 적용이 될까? 결론은 안 된다. input에 이벤트 리스너를 등록하는 시기에는 2개의 li 밖에 없었기 때문에 추가를 한다고 하더라도 기존의 li만 정상 작동하게된다.
그럼 새로 추가해야 하는 li 요소들에 이벤트 핸들러를 매번 등록해 줘야 할까? 이때 이벤트 위임 개념을 적용할 수가 있다.
const logEvent = ()=>{
alert('clicked')
}
const itemList = document.querySelector('.itemList');
itemList.addEventListener('click', logEvent);➡️ ul 태그를 선택하여 이벤트 리스너를 등록한 코드이다. 이벤트 위임이 동작함에 따라 ul 태그의 하위 요소로 어떤 li태그가 추가가 되든 logEvent 함수가 실행되는 것을 확인할 수 있다.
웹 프론트엔드 취업 준비생입니다:)