회고/Techit Frontend School 10기

[멋쟁이 사자처럼 프론트엔드 스쿨] 38일차 TIL - 버블링과 캡처링, 이벤트 위임

kelly09 2024. 6. 22. 02:20

🍰 지금도 더워서 선풍기 틀고 버티는데, 더 더워지면 어떡하나 걱정이다. 작년에 너무 더워서 의욕도 안 생기고... 나태해지고(원래도 그랬을지도.)...

🍴 버블링

: 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전달되는 방식

  • 이벤트는 트리의 하단에서 시작하여 점차 올라감
  • 다음 순서로 진행됨
    1. 실제 이벤트가 발생한 요소
    2. 중간의 부모 요소들
    3. <body>
    4. <html>
    5. document
    6. window

🍴 캡처링

: 최상위 요소에서 시작하여 이벤트가 발생한 실제 요소까지 전달되는 방식

  • 진행되는 순서
    1. window
    2. document
    3. <html>
    4. <body>
    5. 중간의 부모 요소들
    6. 실제 이벤트가 발생한 요소

🍴 중단하기

: 버블링, 캡처링 중단하도록 명령 => event.stopPropagation() 사용

element.addEventListener('click', function(event) {
    event.stopPropagation();  // 여기서 전파 중단
    console.log('Event propagation stopped');
});

🍴 정리

<div id="outer">
    <div id="inner">
        Click me!
    </div>
</div>

버블링 단계

(inner에서 이벤트 발생 가정) inner > outer > body > html > document > window

캡처링 단계

window > document > html > body > outer > inner

🍴 이벤트 위임

: 부모 요소에 이벤트 리스너를 설정하여 자식 요소에서 발생하는 이벤트를 처리하는 기법

  • 많은 자식 요소 각각에 이벤트 리스너를 설정하는 대신
  • 하나의 상위 요소에 리스너를 설정하면 
  • 효율성 높이고 코드의 유지보수에 용이함
/* HTML */
<ul id="parent">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

/* JavaScript */
document.querySelector('#parent').addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        console.log(event.target.textContent);
    }
});
  • event.target은 이벤트가 실제로 발생한 요소 가리킴 => li 요소
  • event.target.tagName === 'LI' 조건문 사용 => 불필요한 요소에서 발생한 이벤트 무시