웹

[javascript] 이벤트 버블링

meno1011 2023. 2. 6. 12:19
728x90

이벤트 객체는 트리거한 DOM노드(아래 예시HTML에서 button)에서 시작해서 모든 조상 노드(div)로 올라간다.

이러한 메커니즘을 버블 단계(bubble phase) 또는 이벤트 버블링(event bubbling)이라고 한다.

 

간단한 중첩구조 HTML로는

<body>
	<div>
		버튼을 감싸고 있는 div
		<button>버튼</button>
	</div>
</body>

메커니즘을 확인할 javascript로는 

const div = document.querySelector('div');
const button = document.querySelector('button');

div.addEventListenser('click', ()=>{
	console.log("div clicked");
});

button.addEventListenser('click', ()=>{
	console.log("button clicked");
});

이 두 코드를 보고 동작 설명하자면 

  1. div를 클릭하게 되면 콘솔엔 div clicked 만 출력되게 된다.
  2. button을 클릭하게 되면 button clicked가 출력후 div clicked가 출력되게 된다.
  3. 2번과 같은 방식이 이벤트 버블링, 버블 단계의 DOM이벤트 라이프사이클 이다.
  4. 1번도 body에 이벤트가 있었다면 div clicked 이후 발생하는 이벤트가 있었을 것이다.