IT/[FE] 위클리 페이퍼

[FE] 📚 이벤트 버블링, 캡쳐링, 위임이란?

serin99 2024. 7. 12. 22:49
728x90



🤗 오늘의 위클리 페이퍼는

Event가 어떻게 동작하는지에 대한 토픽입니다.

 

📝 이벤트(Event)란?

(Chrome, Safari, Edge, Firefox etc..) 이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하는 다양한 액션을 말합니다. 예를 들어, 버튼 클릭, 마우스 이동, 키보드 입력 등이 이벤트에 해당합니다. 이러한 이벤트가 발생하면 특정 동작을 실행하는 이벤트 핸들러(event handler)를 통해 대응할 수 있습니다.

 

 

 

📗 이벤트 버블링

이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때,

그 이벤트가 상위 요소들로 전파되는 것을 이벤트 버블링이라고 합니다.

예를 들어, <button> 요소를 클릭하면 클릭 이벤트가 먼저 버튼 요소에서 발생하고,

그 다음으로 상위 요소인 <div>, 그 다음으로 <body> 등의 순서로 전파 됩니다.

예시에서 버튼을 클릭하면 "Child clicked"가 먼저 출력되고, 그 다음에 "Parent clicked"가 출력됩니다.
<div id="parent">
    <button id="child">Click me</button>
</div>
<script>
    document.getElementById('parent').addEventListener('click', function() {
        console.log('Parent clicked');
    });
    document.getElementById('child').addEventListener('click', function() {
        console.log('Child clicked');
    });
</script>

 

 

기본적으로 대부분의 이벤트는 버블링 단계에서 발생합니다. 이벤트 버블링을 막으려면 객체의
"stopPropagation" 메소드를 사용하면 됩니다.

 

📙 이벤트 캡처링(Event Capturing)

이벤트 버블링과 반대 방향으로 최상위 요소에서부터,

이벤트가 발생한 요소까지 전파되는 과정을 말합니다.
캡처링 단계는 버블링 단계 전에 발생합니다.

버튼을 클릭하면 "Parent clicked"가 먼저 출력되고, 
그 다음에 "Child clicked"가 출력됩니다. true는 캡처링 단계를 활성화합니다.

<div id="parent">
    <button id="child">Click me</button>
</div>
<script>
    document.getElementById('parent').addEventListener('click', function() {
        console.log('Parent clicked');
    }, true);
    document.getElementById('child').addEventListener('click', function() {
        console.log('Child clicked');
    }, true);
</script>



캡처링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 3번째 프로퍼티에 true, 또는 {capture: true}를 전달하면 됩니다.

 

 

 

 

📘 이벤트 위임

공통된 부모 요소에 이벤트 리스너를 등록하여 자식 요소의 이벤트를 처리하는 방법입니다.

이렇게 하면 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서

한 번에 자식 요소들에 발생한 이벤트를 관리할 수 있습니다.

 

 <ul> 요소에 이벤트 리스너를 등록하여, 
 각 <li> 요소를 클릭할 때 해당 아이템의 텍스트를 출력합니다


<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<script>
    document.getElementById('list').addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
            console.log('List item clicked:', event.target.textContent);
        }
    });
</script>

 

 

이와 같이, 이벤트 버블링과 캡처링, 그리고 이벤트 위임은 자바스크립트에서

이벤트를 효과적으로 관리하고 처리하는 중요한 기법들입니다.

728x90