[JavaScript] 이벤트 버블링(Event Bubbling) + e.stopPropagation()

📃 이어지는 글

이벤트 플로우(Event Flow)
이벤트 버블링(Event Bubbling) + e.stopPropagation() ← Now !
이벤트 캡쳐링(Event Capturing)
이벤트 위임(Event delegation)

🤔 버블링이란?

특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성 (propagate up)

<html>
    <body>
        <div>클릭</div>
    </body>
</html>

const html = document.documentElement;
const body = document.body;
const div = document.querySelector("div");

div.addEventListener("click", function () {
	console.log("div");
});

body.addEventListener("click", function () {
	console.log("body");
});

html.addEventListener("click", function () {
	console.log("html");
});

이벤트 플로우의 default 값은 Bubble 이므로,

div → body → html 순으로 이벤트가 진행되는 것을 확인할 수 있다.

🖐 버블링을 막는 e.stopPropagation()

e.stopPropagation() : 부모 태그로의 이벤트 전파를 중지시킴 (내 뒤로 다 멈춰✋!!!)

html은 capture로 설정돼있고, body는 bubble로 설정 돼 있는 상황이라면

( Capture → Target → Bubble 순서는 개발자가 어떻게 할 수가 없으므로! )

①html → (body : 나는 나중에 실행 해야지) → ②div 순서로 실행된다. (body : 이제 내 차례인데 왜 안시켜줘...ㅠㅠ)

div에서 e.stopPropagation()을 했으므로 버블링을 방지해서 body는 실행되지 않는다!

const html = document.documentElement;
const body = document.body;
const div = document.querySelector("div");

div.addEventListener("click", function (e) {
	console.log("div");
	e.stopPropagation(); //부모 태그로의 이벤트 전파 중지 선언
});

body.addEventListener("click", function () {
	console.log("body");
});

html.addEventListener("click", function () {
	console.log("html");
}, true); //html은 Capture로 지정됨

👀 참고

https://youtu.be/SbSAlxw9Lz8

https://ifuwanna.tistory.com/289

[Javascript] event preventDefault() stopPropagation() 차이점

preventDefault(),stopPropagation()는 Event 인터페이스에서 제공하는 메서드 입니다. DOM 내에 위치한 요소들은 Event 인터페이스를 통해 이벤트 관련 다양한 속성과 메서드를 제공받아 이벤트를 수신 받고

ifuwanna.tistory.com

'🍒공부 > JS' 카테고리의 다른 글

[JavaScript] 이벤트 위임(Event delegation) (0)	2021.09.23
[JavaScript] 이벤트 캡쳐링(Event Capturing) (0)	2021.09.23
[JavaScript] 이벤트 플로우(Event Flow) (0)	2021.09.16
[JavaScript] IIFE(Immediately Invoked Function Expression) (0)	2021.09.15
[JavaScript] 이벤트 루프 (0)	2021.08.14

rinrin-dev

[JavaScript] 이벤트 버블링(Event Bubbling) + e.stopPropagation()

📃 이어지는 글

🤔 버블링이란?

🖐 버블링을 막는 e.stopPropagation()

'🍒공부 > JS' 카테고리의 다른 글

댓글

티스토리툴바

[JavaScript] 이벤트 버블링(Event Bubbling) + e.stopPropagation()

📃 이어지는 글

🤔 버블링이란?

🖐 버블링을 막는 e.stopPropagation()

'🍒공부 > JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바