๐ ์ด์ด์ง๋ ๊ธ
- ์ด๋ฒคํธ ํ๋ก์ฐ(Event Flow)
- ์ด๋ฒคํธ ๋ฒ๋ธ๋ง(Event Bubbling) + e.stopPropagation()
- ์ด๋ฒคํธ ์บก์ณ๋ง(Event Capturing) ← Now !
- ์ด๋ฒคํธ ์์(Event delegation)
๐ค ์บก์ณ๋ง์ด๋?
์ด๋ฒคํธ ๋ฒ๋ธ๋ง๊ณผ ๋ฐ๋ ๋ฐฉํฅ์ผ๋ก ์งํ๋๋ ์ด๋ฒคํธ ์ ํ ๋ฐฉ์
์์์์ → ํ์์์ ์ด๋ฒคํธ ์ ๋ฌ์ด ์งํ ๋จ (propagate down)
<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");
}, true);
html.addEventListener("click", function () {
console.log("html");
}, true);
Capture์ true๋ฅผ ์ฃผ์์ผ๋ฏ๋ก, html → body → div ์์ผ๋ก ์ด๋ฒคํธ๊ฐ ์คํ๋๋ค!
'๐๊ณต๋ถ > JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] Babel (0) | 2021.09.25 |
|---|---|
| [JavaScript] ์ด๋ฒคํธ ์์(Event delegation) (0) | 2021.09.23 |
| [JavaScript] ์ด๋ฒคํธ ๋ฒ๋ธ๋ง(Event Bubbling) + e.stopPropagation() (0) | 2021.09.17 |
| [JavaScript] ์ด๋ฒคํธ ํ๋ก์ฐ(Event Flow) (0) | 2021.09.16 |
| [JavaScript] IIFE(Immediately Invoked Function Expression) (0) | 2021.09.15 |
๋๊ธ