불로구

자바스크립트 - 이벤트 흐름 ( 캡쳐 단계, 버블 단계) 본문

프로그래밍/JavaScript

자바스크립트 - 이벤트 흐름 ( 캡쳐 단계, 버블 단계)

맹이맹이 2020. 6. 26. 03:11
반응형

이벤트 흐름

- 발생한 이벤트는 타겟 객체에 전달된다.

- 하지만 이벤트가 단번에 타겟 객체로 전달되고 사라지는 것은 아님!

- 발생 이벤트는 window 객체로부터 DOM 트리를 타고 중간 DOM 객체들을 거쳐 타겟 객체로 흘러간다.

- 그 후에 다시 반대 방향으로 이동하여 window 객체에 도달한 후 없어진다.

- 이러한 과정을 JavaScript에서는 이벤트 흐름이라고 부른다.

캡쳐 단계 vs 버블 단계

1) 캡쳐 단계

- window에서 타겟 객체까지 이벤트 객체가 전파되는 과정

- window와 중간에 있는 모든 DOM 객체들을 거쳐 타겟 객체에 이벤트 객체 전달

- 갭쳐 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 흐름 순으로 실행

- 캡쳐 단계에서 실행되도록 작성된 리스너를 캡쳐 리스너라고 한다.

2) 버블 단계

- 타겟 객체에서 거꾸로 window까지 이벤트 객체가 전파되는 과정

- 버블 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 순서대로 실행

- 버블 단계에서 실행되도록 작성된 이벤트 리스너를 버블 리스너라고 부른다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script>
     </script>
</head>
<body>
    <p>안녕하세요</p>
    <form>
        <button>버튼1</button>
        <button>버튼2</button>
        <hr>
    </form>
</body>
</html>

이러한 코드가 있을 때 dom 트리의 모습은 아래와 같다.

캡쳐 리스너와 버블 리스너

- 하나의 DOM 객체는 캡쳐 리스너와 버블 리스너를 모두 가질 수 있다.

- addEventListener()의 경우, 3번째 매개 변수가 true 일 때 캡쳐 리스너, false 일 때 버블 리스너로 등록

let a = document.querySelector("button");
a.addEventListener("click",captureF, true); // 캡쳐 단계에서 captureF() 실행
a.addEventListener("click",bubbleF, false); // 버블 단계에서 bubbleF() 실행

이벤트 흐름과 관련된 멤버

cancelable

프로퍼티

디폴트 행동 취소 가능 이벤트 여부 T/F

stopPropagation()

메소드

객체에 등록된 리스너를 모두 실행 후 이벤트 흐름 중단

stopImmediatePropagation()

메소드

현재 리스너만 실행하고 이벤트 흐름 바로 중단

혹시나 궁금한 점은 댓글로 남겨주세요!

반응형
Comments