자바스크립트에서 이벤트가 실행되는 흐름은
이벤트 발생한 곳에서 단독적으로 실행되는 것이 아니라
최상위 부모 노드에서부터 자식 노드 순으로 이벤트 체크를 통해 진행된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>event handing sample</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<link href="common.css" rel="stylesheet" type="text/css">
<script>
var count = 0;
$(document).ready(function () {
// 캡처 단계 이벤트 등록
document.addEventListener("click", function (e) {
count++;
console.log("01. document phase=" + e.eventPhase, "count=" + count);
}, true);
document.body.addEventListener("click", function (e) {
count++;
console.log("02. body phase=" + e.eventPhase, "count=" + count);
}, true);
$("#A1").get(0).addEventListener("click", function (e) {
count++;
console.log("03. A1 phase=" + e.eventPhase, "count=" + count);
}, true);
$("#B1").get(0).addEventListener("click", function (e) {
count++;
console.log("04. B1 phase=" + e.eventPhase, "count=" + count);
}, true);
$("#A2").get(0).addEventListener("click", function (e) {
count++;
console.log("05. A2 phase=" + e.eventPhase, "count=" + count);
}, true);
// 타깃/버블 단계 이벤트 등록
$("document").on("click", function (e) {
count++;
console.log("11. document phase=" + e.eventPhase, "count=" + count);
});
$("body").on("click", function (e) {
count++;
console.log("12. body phase=" + e.eventPhase, "count=" + count);
});
$("#A1").on("click", function (e) {
count++;
console.log("13. A1 phase=" + e.eventPhase, "count=" + count);
});
$("#B1").on("click", function (e) {
count++;
console.log("14. B1 phase=" + e.eventPhase, "count=" + count);
});
$("#A2").on("click", function (e) {
count++;
console.log("15. A2 phase=" + e.eventPhase, "count=" + count);
});
$("#B2").on("click", function (e) {
count++;
console.log("16. B2 phase=" + e.eventPhase, "count=" + count);
});
});
</script>
</head>
<body>
<div id="A1">
A1
<div id="B1">
B1
<div id="C1">
C1
</div>
</div>
</div>
<div id="A2">
A2
<div id="B2">
B2
<div id="C2">
C2
</div>
</div>
</div>
</body>
</html>
div {
border : 1px solid #000;
display: inline-bolck;
margin-left: 25px;
margin-top:25px;
align-content: left;
float:left;
}
html {
width: 500px;
height: 800px;
border:1px solid #000;
}
body {
width: 450px;
height: 700px;
margin-left: 25px;
margin-top:25px;
border:1px solid #000;
}
#A1,#A2 {
width : 400px;
height: 300px;
}
#B1,#B2 {
width : 350px;
height: 250px;
}
#C1,#C2 {
width : 300px;
height: 200px;
}
예를 들어 C1을 클릭했을 때
가장 상위 div부터 차례대로 확인한 다음 C1에서 실행됐다는 것을 알고 차례로 바깥으로 나가서 이벤트를 실행한다.
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 이벤트 중복 실행 방지하기 (0) | 2020.08.05 |
|---|---|
| [Javascript] 이벤트 단계 (0) | 2020.08.05 |
| [Javascript] 메뉴 페이지 만들기 실습 (feat. Javascript, jQuery) (0) | 2020.08.05 |
| [Javascript] 해당 속성 변경하기 (0) | 2020.08.04 |
| [Javascript] 속성 읽어오기 (0) | 2020.08.04 |
