강의 링크: https://youtu.be/7gKtNC3b_S8
자료 링크: https://ko.javascript.info/event-delegation
파트: JS
- 용어 정리
- currentTarget ⇒ 이벤트의 진짜 주인
- target ⇒ 이벤트의 시발점
⇒ div를 클릭할 때마다 브라우저는 캡쳐 → 타겟 → 버블 순으로 계속 작동함
⇒ event flow phase 중 어느 단계에서 실행되고 싶은지 선택 할 수 있음(기본값은 버블)
예제 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=\, initial-scale=1.0" />
<title>Document</title>
<style>
body {
width: 100%;
height: 100vh;
}
div {
background-color: hotpink;
}
</style>
</head>
<body>
<div>클릭</div>
<script src="./app.js"></script>
</body>
</html>app.js
const html = document.documentElement;
const body = document.body;
const div = document.querySelector('div');
div.addEventListener(
'click',
function () {
console.log('DIV');
},
// div는 가장 작은 단위, 다른 것에 영향 받아 실행 될 수 었음. true 사용할 시 event에 대해 잘 모른다고 생각 할 수 있음
);
body.addEventListener(
'click',
function () {
console.log('BODY');
}
false // 버블링할 때 실행(기본값)
);
html.addEventListener(
'click',
function () {
console.log('HTML');
},
true //다른 것에 영향 받아 실행이 된다면 캡쳐 때 실행을 할 것이라는 뜻
);
- 추가 강의
팀에서 꼭 필요한 프론트엔드 개발자가 되고 싶습니다.