<!DOCTYPE html>
<html>
<head>
<title>이벤트 캡쳐링, 버블링</title>
<meta charset="UTF-8" />
</head>
<body>
<button type="button">click</button>
<script>
window.addEventListener(
"click",
function () {
console.log(1);
},
useCapture
);
document.addEventListener(
"click",
function () {
console.log(2);
},
true
);
document.documentElement.addEventListener(
"click",
function () {
console.log(3);
},
true
);
document.body.addEventListener(
"click",
function () {
console.log(4);
},
true
);
document.querySelector("button").addEventListener(
"click",
function () {
console.log(5);
},
true
);
document.querySelector("button").addEventListener(
"click",
function () {
console.log(6);
},
false
);
document.body.addEventListener(
"click",
function () {
console.log(7);
},
false
);
document.documentElement.addEventListener(
"click",
function () {
console.log(8);
},
false
);
document.addEventListener(
"click",
function () {
console.log(9);
},
false
);
window.addEventListener(
"click",
function () {
console.log(10);
},
false
);
</script>
</body>
</html>
addEventListner ("이벤트 타입", 이벤트 발생 시 실행할 함수, useCapture => 캡쳐링 단계에서 해당 리스너를 실행 여부 T/F)
버튼 클릭 했을 때 : 캡쳐링 -> 버블링 실행
버튼 바깥을 클릭했을 때 : 5, 6번 실행되지 않음
이벤트 리스너가 div 요소에 있고 사용자가 부모 요소 div의 자식인 button 태그를 클릭했다면?
확인해보기
또 확인해보기
버튼을 눌렀을 때, 아이템을 만들건데 이벤트는 더 상단의 div에 있을 때.
버튼을 누르면 새로운 li들이 생겨난다.
li들을 눌렀을 때 console.log 찍히게 이벤트 발생시키기도 추가
기존에 있던 아이템, 새로 생긴 hello~들을 누르면 hit 이 콘솔에 나온다.
버튼, li, 새로 생긴 자식 요소 들에도 모두 이벤트가 등록되었다.