자바스크립트

이벤트 버블링&캡쳐링, 이벤트 전파

solfa 2024. 7. 8. 02:32

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.

https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV

 

프론트엔드 날개달기

이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.

www.youtube.com

 

이벤트 버블링과 캡처링

이벤트 전파의 개념

  • 이벤트 전파: HTML 요소에서 이벤트가 발생했을 때 브라우저가 이벤트를 전달하는 방식.
  • 이벤트는 두 가지 방식으로 전파됨: 캡처링(Capturing)과 버블링(Bubbling).


이벤트 전파 단계

  1. 캡처링(Capturing): 이벤트가 최상위 요소(html)에서 시작하여 타겟 요소까지 내려감.
  2. 버블링(Bubbling): 이벤트가 타겟 요소에서 시작하여 최상위 요소까지 올라감.

캡처링과 버블링의 흐름

  • 예: <html> → <body> → <main> → <div> → <p> → <span> 순서로 이벤트가 전달됨.
  • 캡처링 단계에서는 <html>부터 <span>까지 내려가며 이벤트가 전달되고, 버블링 단계에서는 <span>에서 <html>로 다시 올라감.

기본 예제

  1. 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);

실습 예제

  1. 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