<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>event의 캡쳐와 버블 단계</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>
let div = document.getElementById("div"); //이벤트 메시지 출력공간
let button = document.getElementById("button");
//body 갹체에 캡쳐 리스너를 등록
document.body.addEventListener("click", capture, true);
/* - true는 캡쳐단계로 window객체에서 시작하여 이벤트발생 DOM으로 이벤트를 전달한다.
- 기본은 false로 버블 단계로 이벤트발생 DOM에서 window객체로 전달한다.
*/
//타겟 객체(button)에 버블 리스너 등록
button.addEventListener("click", bubble, false); // false는 기본이므로 생략 가능하다.
function capture(e) {
let obj = e.currentTarget; //현재 이벤트를 받은 DOM 객체
let tagName = obj.tagName; //태그명
div.innerHTML += "<br/>capture 단계 : " + tagName + "태그" + e.type + "이벤트";
}
function bubble(e) {
let obj = e.currentTarget; //현재 이벤트를 받은 DOM 객체
let tagName = obj.tagName; //태그명
div.innerHTML += "<br/>bubble 단계 : " + tagName + "태그" + e.type + "이벤트";
}
//하위 DOM의 이벤트 발생시에는 상위 DOM의 이벤트 전달을 거쳐 하위 DOM에 온다.
</script>
</body>
</html>