안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
이벤트 전파 (Event Propagation)
- 이벤트는 전파됨
- bubbling : 자식 요소에서 부모 요소로 전파 (기본속성)
HTML 코드
<div id="bubble1" class="bubble bubble1">
<div id="bubble2" class="bubble bubble2">
<div id="bubble3" class="bubble bubble3"></div>
</div>
</div>
CSS 코드
<style>
.bubble {border: 1px solid black; padding: 20px;}
.bubble1 {background-color: lightblue;}
.bubble2 {background-color: lightcoral;}
.bubble3 {background-color: lightgreen;}
</style>
Javascript 코드
document.body.addEventListener('click', (e) => {
console.log('body 클릭!', e.target);
});
document.querySelector('#bubble1').addEventListener('click', (e) => {
console.log('#bubble1 클릭!', e.target);
});
document.querySelector('#bubble2').addEventListener('click', (e) => {
console.log('#bubble2 클릭!', e.target);
});
document.querySelector('#bubble3').addEventListener('click', (e) => {
console.log('#bubble3 클릭!', e.target);
});
bubble3 클릭 시
bubble3만 클릭하였는데, 이벤트가 전파되어 bubble2와 bubble1, body 또한 이벤트가 발생되었습니다.
bubble2 클릭 시
bubble2를 클릭하였더니, 부모 → 자식으로 전파되어 bubble1, body의 이벤트도 발생되었습니다.
bubble1 클릭 시
bubble1를 클릭하였더니, 마찬가지로 이벤트가 전파되어 body의 이벤트도 발생되었습니다.
이벤트 전파 방지
stopPropagation()
document.querySelector('#bubble3').addEventListener('click', (e) => {
console.log('#bubble3 클릭!', e.target);
e.stopPropagation();
});
stopPropagation()을 이용하여 이벤트의 전파를 방지할 수도 있습니다.
이벤트 전파 특성을 이용하여 클릭 이벤트를 하나만 생성하고 모두 처리하기
document.body.addEventListener('click', (e) => {
// console.log('body 클릭!', e.target);
switch(e.target) {
case bubble1 : console.log('#bubble1 클릭!', e.target); break;
case bubble2 : console.log('#bubble2 클릭!', e.target); break;
case bubble3 : console.log('#bubble3 클릭!', e.target); break;
}
});자식 요소에서 부모 요소로 이벤트가 전파되는 특성을 이용하여 부모 요소에서 발생한 click이벤트의 target을 받아 처리를 해줄 수 있습니다.
Trigger Event
HTML 코드
<h3 id="counter"></h3>
<button id="btn-trigger-counter">클릭</button>
Javascript 코드
let num = 0;
counter.innerHTML = num;
counter.addEventListener('click', () => {
num++;
counter.innerHTML = num;
});
document.querySelector("#btn-trigger-counter").addEventListener('click', () => {
const event = new MouseEvent('click');
counter.dispatchEvent(event);
});
new MouseEvent('click')으로 이벤트를 하나 생성 한 후 dispatchEvent로 생성한 이벤트를 보내주어 클릭 버튼을 누를 때도 기존 이벤트 속성에 덧붙여서 숫자 카운팅이 될 수 있게끔 해주었습니다.
