이벤트 버블링 현상
이벤트 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고, 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.
ex)
<body>
<div class="DIV1">
DIV1
<div class="DIV2">
DIV2
<div class="DIV3">DIV3</div>
</div>
</div>
</body>
JavaScript
복사
const divs = document.querySelectorAll("div");
const clickEvent = (e) => {
console.log(e.currentTarget.className);
};
divs.forEach((div) => {
div.addEventListener("click", clickEvent);
});
JavaScript
복사
→ div를 클릭하면 해당 클래스의 이름이 콘솔로 출력되는 코드
→ 자바스크립트는 기본적으로 버블링이 발생하기 때문에, <div class=”DIV3”>DIV3</div> 를 클릭한다면, 콘솔에는 DIV3, DIV2, DIV1이 순서대로 출력될 것이다
<div class=”DIV3”>DIV3</div> 를 클릭하면 할당되어 있는 이벤트가 발생하고, 다음에는 바깥의 div 태그에 할당된 이벤트가 발생하고 document 객체를 만날 때까지 이벤트가 전파된다.
1.
이 이벤트 버블링을 방지할 수 있는 방법은 정확한 이벤트를 선택해주는 currentTarget을 Target 대신 사용하는 방법이 있다.
2.
event.stopPropagation()를 사용
문제
버튼을 클릭할 때, ‘hello, event bubbling’을 alert 하게 다음 코드를 수정 (리스너를 button 태그에 달아서는 안된다)
<header>
<div>
<button>클릭</button>
</div>
</headaer>
<script>
</script>
HTML
복사
—>
<header>
<div>
<button>클릭</button>
</div>
</headaer>
<script>
document.querySelector('header').addEventListener('click', () => {
console.log('hello, event bubbling');
});
</script>
HTML
복사