1. 이벤트 흐름과 이벤트 리스너
① 캡쳐 단계(capturing phase)
: window에서 타겟 객체까지 이벤트 객체가 전파되는 과정
: 캡쳐 리스너 - 캡쳐 단계에서 실행되도록 작성된 이벤트 리스너
② 버블 단계(bubbling phase)
: 타겟 객체에서 거꾸로 window까지 이벤트 객체가 전파되는 과정
: 버블 리스너 - 버블 단계에서 실행되도록 작성된 이벤트 리스너
2. 이벤트 흐름 사례
3. 캡쳐 리스너와 버블 리스너
var b = document.getElementById("button");
b.addEventListener("click", capFunc, true); //캡쳐 단계에서 capFunc() 실행
b.addEventListener("click", bubbleFunc, false); //버블 단계에서 bubbleFunc() 실행
- true : 캡쳐 단계
- false : 버블 단계
<예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 흐름</title>
</head>
<body>
<p style="color: blue">이것은
<span style="color: red" id="span">문장입니다.</span>
</p>
<form>
<input type="text" name="s">
<input type="button" value="테스트" id="button">
<hr>
</form>
<div id="div" style="color: green"></div>
<script>
var div = document.getElementById("div"); //이벤트 메시지 출력 공간
var button = document.getElementById("button");
//body 객체에 캡쳐 리스너 등록
document.body.addEventListener("click", capture, true); //캡쳐 단계(1)
//타겟 객체에 버블 리스너 등록
button.addEventListener("click", bubble, false); //버블 단계(2)
//body 객체에 버블 리스너 등록
document.body.addEventListener("click", bubble, false); //버블 단계(3)
function capture(e) { //e는 이벤트 객체
var obj = e.currentTarget; //현재 이벤트를 받은 DOM 객체
var tagName = obj.tagName; //태그 이름
div.innerHTML += "<br>capture 단계 : " + tagName + " 태그 " + e.type + "이벤트";
}
function bubble(e) { //e는 이벤트 객체
var obj = e.currentTarget; //현재 이벤트를 받은 DOM 객체
var tagName = obj.tagName; //태그 이름
div.innerHTML += "<br>bubble 단계 : " + tagName + " 태그 " + e.type + "이벤트";
}
</script>
</body>
</html>
4. 이벤트 흐름 중단 : stopPropagation()
event.stopPropagation(); //event가 이벤트 객체일 때'JavaScript > 4. 이벤트 기초 및 활용' 카테고리의 다른 글
| Day 47 : Script (0) | 2021.12.22 |
|---|---|
| Day 47 : 문서와 이미지 로딩, onload (0) | 2021.12.22 |
| Day 47 : 마우스 핸들링 (0) | 2021.12.22 |
| Day 47 : 이벤트 객체 (0) | 2021.12.22 |
| Day 47 : 이벤트 기초 및 활용 (0) | 2021.12.22 |