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");
});이 두 코드를 보고 동작 설명하자면
- div를 클릭하게 되면 콘솔엔 div clicked 만 출력되게 된다.
- button을 클릭하게 되면 button clicked가 출력후 div clicked가 출력되게 된다.
- 2번과 같은 방식이 이벤트 버블링, 버블 단계의 DOM이벤트 라이프사이클 이다.
- 1번도 body에 이벤트가 있었다면 div clicked 이후 발생하는 이벤트가 있었을 것이다.
'웹' 카테고리의 다른 글
| next.js 로 설문 사이트 만들기1 (0) | 2023.05.02 |
|---|---|
| [javascript] 브라우저 렌더링 (0) | 2023.02.06 |
| Path variale와 Query string (1) | 2023.02.02 |
| Next.JS에서 styled-components 사용하기 (0) | 2023.01.09 |
| 리덕스(redux) 이해하기 1 (0) | 2022.11.13 |
