참고자료
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling
이벤트 버블링이란
물 속에서 공기를 내뱉으면, 공기 방울이 위로 올라갑니다.
이벤트 버블링은 이벤트가 발생한 태그로부터 상위 태그의 이벤트들이 순차적으로 발생하는 것을 말합니다.
이벤트 버블링 예제 (1)
<body>태그 안에 <div id="container">태그 안에 <button>이 있는 html 코드입니다.
<!-- index.html -->
<body>
<div id="container">
<button>Click Button!</button>
</div>
<pre id="output"></pre>
<script src="script.js"></script>
</body>여기에 각 요소를 클릭했을 때, 태그 이름을 출력하는 EventListener를 실행하는 자바스크립트 코드를 작성한 다음에 실행하면 어떻게 될까요?
// script.js
const output = document.querySelector('#output');
function handleClick(e) {
console.log(`${e.currentTarget.tagName} 태그가 클릭되었습니다!\n`);
}
const container = document.querySelector('#container');
const button = document.querySelector('button');
document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
button.addEventListener('click', handleClick);버튼을 한 번 클릭한 후에 출력되는 console.log는 다음과 같습니다.
BUTTON 태그가 클릭되었습니다!
DIV 태그가 클릭되었습니다!
BODY 태그가 클릭되었습니다!우리가 실제로 클릭했다고 생각하는 <button>태그(이벤트가 발생한 태그) 이 외에도 <button>태그를 감싸고 있는 div태그와 가장 바깥에 있는 <body>태그까지.
모든 상위 태그들이 안쪽에서부터 바깥쪽으로 순서대로 클릭 이벤트가 실행된 것을 확인할 수 있습니다.
버블링되지 않는 이벤트
대부분의 이벤트들은 버블링되지만, 일부 이벤트는 버블링 되지 않습니다.
예를 들어, focus가 해당됩니다.
<!-- index.html -->
// script.js
이벤트 버블링 멈추는 방법
Developer