불로구
자바스크립트 - 이벤트 흐름 ( 캡쳐 단계, 버블 단계) 본문
이벤트 흐름
- 발생한 이벤트는 타겟 객체에 전달된다.
- 하지만 이벤트가 단번에 타겟 객체로 전달되고 사라지는 것은 아님!
- 발생 이벤트는 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() |
메소드 |
현재 리스너만 실행하고 이벤트 흐름 바로 중단 |
혹시나 궁금한 점은 댓글로 남겨주세요!
'프로그래밍 > JavaScript' 카테고리의 다른 글
자바스크립트 - 마우스 핸들링 (0) | 2020.06.30 |
---|---|
자바스크립트 - 이벤트 타겟, 이벤트 취소( (preventDefault() ) (0) | 2020.06.25 |
자바스크립트 - 이벤트 객체 (0) | 2020.06.25 |
자바스크립트 - 이벤트, 이벤트 리스너, 익명 함수 (0) | 2020.06.25 |
자바스크립트 - DOM 객체 생성, 삽입, 삭제 (0) | 2020.06.22 |