WebAPI에 EVNET에는 click , keypress , focus , submit , scroll , load , change 등 다양한 이벤트들이 있다. 만약 부모 요소와 자식 요소에 둘 다 같은 종류의 이벤트가 할당 되어있을 때, 이벤트를 동작시키면 어떤 이벤트가 먼저 실행될까?
이벤트 버블링(Event Bubbling)
이벤트 버블링은 특정 요소에서 이벤트 발생 시 상위의 화면 요소로 전달되어 가는 특성을 의미한다.
예제
<body>
<div class="DIV1">
DIV1
<div class="DIV2">
DIV2
<div class="DIV3">DIV3</div>
</div>
</div>
</body>
const divs = document.querySelectorAll("div");
const clickEvent = (e) => {
console.log(e.currentTarget.className);
};
divs.forEach((div) => {
div.addEventListener("click", clickEvent);
});
div를 클릭하면 해당하는 클래스의 이름이 콘솔로 출력되는 코드이다.
자바스크립트는 기본적으로 버블링이 발생하기 때문에 <div class="DIV3">DIV3</div>를 클릭한다면 콘솔에는 DIV3, DIV2, DIV1이 순서대로 출력이 될 것이다.
이벤트 캡처링(Event Capturing)
이벤트 버블링과 반대로 부모 요소에서부터 자식 요소로 이벤트를 전달하기 위해서 이벤트 캡처링이라는 특성을 사용 할 수 있다.
예제
const divs = document.querySelectorAll("div");
const clickEvent = (e) => {
console.log(e.currentTarget.className);
};
divs.forEach((div) => {
div.addEventListener("click", clickEvent, { capture: true });
});
addEventListener 의 옵션 객체에 { capture: true } 또는 true 를 설정해주면 캡처링을 구현할 수 있다.
<div class="DIV3">DIV3</div>를 클릭한다면 위에서부터 찾아 내려오기 때문에 콘솔에는 DIV1, DIV2, DIV3이 순서대로 찍힐 것이다.
이벤트 전파 막기
버블링은 해당 타깃에서 document 객체를 만날 때까지 핸들러가 모두 호출되는데 코드를 작성하다보면 원하는 타깃에서만 이벤트를 발생하게 하고 싶을때가 있다.
그럴 때에는 event.stopPropagation() 을 사용하면 되는데 버블링의 경우에는 클릭한 타깃의 이벤트만 발생하고 상위 요소로 이벤트가 전파되는 것을 막을 수 있다.
버블링에서 작성된 코드에 event.stopPropagation() 을 추가하고 실행해보자.
const clickEvent = (e) => {
e.stopPropagation();
console.log(e.currentTarget.className);
};아까는 DIV3을 클릭했을 때 이벤트가 전파되어 DIV3, DIV2, DIV1 이 출력이 됐지만 이번에는 클릭한 타깃의 이벤트만 발생하는 것을 알 수 있다.
이벤트 버블링과 캡처링에 대한 정리
이벤트 버블링과 이벤트 캡처링에 대해서 알아보자.이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부
velog.io
JavaScript - 이벤트 버블링과 이벤트 캡처링
JavaScript에는 click , keypress , focus , submit , scroll , load , change…
jongminfire.dev
'Javascript > 문법' 카테고리의 다른 글
| [javascript] Array.prototype.with() 배열의 인덱스에 위치한 값 변경하기 (0) | 2023.11.26 |
|---|---|
| [javascript] 동적 모듈 가져오기(import) (0) | 2023.10.27 |
| [Javascript] Promise.allSettled(feat. Promise.all 차이) (0) | 2023.07.09 |
| [jvascript] encodeURIComponent (0) | 2023.04.16 |
| [javascript] structuredClone()-새로운 객체 복사 방법 (0) | 2023.01.03 |
