이벤트 버블링은 한 요소가 두 번째 요소 내부에 중첩되고 두 요소가 동일한 이벤트(예:클릭)에 대한 리스너를 등록할 때 이벤트 핸들러가 호출되는 순서입니다. 버블링을 사용하면 이벤트가 먼저 가장 안쪽 요소에서 캡처되고 처리된 다음 바깥쪽 요소로 전파됩니다.
캡처를 사용하면 이벤트가 먼저 가장 바깥쪽 요소에 의해 캡처되고 내부 요소로 전파됩니다.
둘 다의 예를 살펴보겠습니다.
다음 두 예 모두에 대해 다음 HTML을 작성하십시오 -
예시
<div id='outer' style='background-color:red;display:inline-block;padding:50px;'> Outer Div <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'> Inner Div </div> </div>
1. 이벤트 버블링
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, false); 위의 코드를 실행하고 내부 div를 클릭하면 로그가 표시됩니다 -
Inner div is clicked Outer div is clicked
2. 이벤트 캡처
document.querySelector('#outer').addEventListener('click', e => {
console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
console.log('Inner div is clicked');
}, true); 위의 코드를 실행하고 내부 div를 클릭하면 로그가 표시됩니다 -
Outer div is clicked Inner div is clicked