반응형
Event Capture, Propagation, Bubbling and Once
목표
이벤트 캡쳐링 - 최상위 태그가 먼저 실행이 되고, 그 후에 점점 하위로 호출
이벤트 버블링 - 최하위 태그가 먼저 실행이 되고, 그 후에 점점 상위로 호출
을 구현해보고 알아봄.
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Understanding JavaScript's Capture</title>
</head>
<body class="bod">
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
<button>button</button>
<script>
</script>
</body>
</html>과정
- 상수 선언
- 현재의 클래스 값을 콘솔에 출력하는 함수 생성
- div, button에 대해 이벤트리스너 생성
코드 분석
1. 상수 선언
const divs = document.querySelectorAll('div');
const button = document.querySelector('button');div와 button 태그를 각각의 변수에 담는다
2. 현재의 클래스 값을 콘솔에 출력하는 함수 생성
const logText = e => {
console.log(e.target.classList.value);
}이벤트가 발생하면 클래스의 값들을 콘솔에 출력
3. div, button에 대해 이벤트리스너 생성
divs.forEach(div => div.addEventListener('click', logText, {
capture: false,
once: true
}));
button.addEventListener('click', () => {
console.log('Click!!!');
}, {
once: true
})div를 클릭시 logText를 최하위 태그부터 실행되며, 한번만 이벤트를 받게하고,button 클릭시 콘솔에 메세지가 나오도록 입력
찾아본 내용, 알게된 내용들
capture - 최상단에서 설명한 capturing, bubbling을 선택하는 것이고once - 이벤트를 한번만 실행하고 이벤트리스너를 삭제한다는 뜻