Javascript-이벤트 버블링, 캡처 그리고 위임

hotbreakb·2022년 6월 24일

javascript

목록 보기

2/5

이벤트도 전파가 된다지?

버블링 (default)

한 요소에서 이벤트가 발생하면, 가장 최상단의 조상 요소를 만날 때까지 핸들러가 동작한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="src.js" defer></script>
    <title>Document</title>
</head>
<body>
    <button>button</button>
</body>
</html>

document.querySelector("button").addEventListener("click", () => {
    console.log("button clicked");
});

document.querySelector("body").addEventListener("click", () => {
    console.log("body clicked");
});

document.querySelector("html").addEventListener("click", () => {
    console.log("html clicked");
});

캡처링

버블링과 반대로 동작한다.

document.querySelector("button").addEventListener("click", () => {
    console.log("button clicked");
}, true);

document.querySelector("body").addEventListener("click", () => {
    console.log("body clicked");
}, true);

document.querySelector("html").addEventListener("click", () => {
    console.log("html clicked");
}, true);

event.target과 event.currentTarget

target: 이벤트의 시초가 된 것
currentTarget: 지금 이벤트가 발생하고 있는 곳

중단 - event.stopPropagation()

버블링이나 캡처링을 중단할 수 있다.

document.querySelector("body").addEventListener("click", (event) => {
    event.stopPropagation();
    console.log("body clicked");
}, true);

위임

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

<body>
    <div>
        <button>button</button>
        <button>button</button>
        <button>button</button>
        <button>button</button>
    </div>
</body>

document.querySelector("div").addEventListener("click", () => {
    console.log("button clicked");
}, true);

참고 자료

hotbreakb

글쟁이 프론트 개발자, 헬렌입니다.

이전 포스트

Javascript-this

다음 포스트