해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.
https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV
이벤트 버블링과 캡처링
이벤트 전파의 개념
- 이벤트 전파: HTML 요소에서 이벤트가 발생했을 때 브라우저가 이벤트를 전달하는 방식.
- 이벤트는 두 가지 방식으로 전파됨: 캡처링(Capturing)과 버블링(Bubbling).
이벤트 전파 단계
- 캡처링(Capturing): 이벤트가 최상위 요소(html)에서 시작하여 타겟 요소까지 내려감.
- 버블링(Bubbling): 이벤트가 타겟 요소에서 시작하여 최상위 요소까지 올라감.
캡처링과 버블링의 흐름
- 예: <html> → <body> → <main> → <div> → <p> → <span> 순서로 이벤트가 전달됨.
- 캡처링 단계에서는 <html>부터 <span>까지 내려가며 이벤트가 전달되고, 버블링 단계에서는 <span>에서 <html>로 다시 올라감.
기본 예제
- HTML 구조:
<html>
<body>
<main>
<div>
<p>
<span>Click me</span>
</p>
</div>
</main>
</body>
</html>
2. 자바스크립트 코드:
document.querySelector('span').addEventListener('click', function() {
console.log('Span clicked');
});
이벤트 버블링
- 기본 동작으로 이벤트는 버블링 단계에서 처리된다.
- 이벤트 리스너 등록 시 세 번째 인자로 false를 사용하여 버블링 단계에서 이벤트를 처리한다:
element.addEventListener('click', handler, false);
이벤트 캡처링
- 이벤트 리스너 등록 시 세 번째 인자로 true를 사용하여 캡처링 단계에서 이벤트를 처리한다 :
element.addEventListener('click', handler, true);
실습 예제
- HTML 요소를 선택하고 이벤트 리스너 등록:
const span = document.querySelector('span');
const p = document.querySelector('p');
const div = document.querySelector('div');
const main = document.querySelector('main');
const body = document.querySelector('body');
span.addEventListener('click', () => console.log('Span clicked'), false);
p.addEventListener('click', () => console.log('P clicked'), false);
div.addEventListener('click', () => console.log('Div clicked'), false);
main.addEventListener('click', () => console.log('Main clicked'), false);
body.addEventListener('click', () => console.log('Body clicked'), false);
2. 캡처링 단계에서 이벤트 리스너 등록:
span.addEventListener('click', () => console.log('Span clicked - Capturing'), true);
p.addEventListener('click', () => console.log('P clicked - Capturing'), true);
div.addEventListener('click', () => console.log('Div clicked - Capturing'), true);
main.addEventListener('click', () => console.log('Main clicked - Capturing'), true);
body.addEventListener('click', () => console.log('Body clicked - Capturing'), true);
이벤트 전파 중단
- event.stopPropagation()을 사용하여 이벤트 전파를 중단한다:
span.addEventListener('click', function(event) {
event.stopPropagation();
console.log('Span clicked');
}, false);
기본 동작 방지
- event.preventDefault()를 사용하여 기본 동작을 방지한다:
const link = document.querySelector('a');
link.addEventListener('click', function(event) {
event.preventDefault();
console.log('Link clicked but default action prevented');
});
정리
- 캡처링: 최상위 요소에서 타겟 요소로 이벤트 전파.
- 버블링: 타겟 요소에서 최상위 요소로 이벤트 전파.
- 이벤트 전파 중단: event.stopPropagation().
- 기본 동작 방지: event.preventDefault().
728x90
'자바스크립트' 카테고리의 다른 글
[JS] 한 페이지에서 많은 API 호출을 효율적으로 처리하는 방법 / Promise.all 사용하기 (0) | 2024.07.09 |
---|---|
this란 무엇인가? (0) | 2024.07.08 |
파일 효과적으로 가져오기 | script defer, async (0) | 2024.07.08 |
BOM 이란? (0) | 2024.07.08 |
DOM 이란? (0) | 2024.07.08 |