이벤트 캡쳐링과 이벤트 버블링

이벤트 캡쳐링

이벤트 캡처링(Event Capturing)은 상위 요소에서 하위 요소로 이벤트가 전달되는 동작 방식이다. 즉, 이벤트가 발생한 요소의 최상위 조상 요소부터 이벤트 타겟 요소까지 이벤트가 전달되는 방식이다.

이벤트 캡처링은 HTML5에서 추가된 이벤트 전파 방식으로, 모든 이벤트에 적용된다. 이벤트 타겟 요소에서 이벤트가 발생하기 전에 해당 요소의 상위 요소에서 먼저 이벤트를 처리할 수 있다.

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해보자.

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

여기에서 button 요소를 클릭하면, 클릭 이벤트가 button 요소에서 발생하게 된다. 이벤트 캡처링이 적용된 경우, 클릭 이벤트는 outer -> inner -> button 요소로 전달된다. 이 때, 전달되는 이벤트 객체는 event.target 속성으로 현재 클릭된 요소를 가리킵니다.

이벤트 캡처링은 이벤트 전파 순서를 변경할 수 없다. 이벤트를 캡처링하는 이유는 보안적인 이유와 이벤트 처리 성능 향상을 위해서이다. 이벤트 캡처링은 보안적으로 안전한 이벤트 처리 방식으로, 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 것을 막아서 의도치 않은 동작을 막을 수 있다.

이벤트 캡처링은 다음과 같이 등록할 수 있다.

document.getElementById('btn').addEventListener('click', function(event) {
  console.log('Button clicked!');
}, true); // 세 번째 인자에 true를 지정하여 이벤트 캡처링 등록

세 번째 인자에 true를 지정하여 이벤트 캡처링을 등록할 수 있다.

즉, 이벤트 캡쳐링은 이벤트가 상위에서 하위 요소로 전파되는 것

이벤트 버블링

이벤트 버블링(Event Bubbling)은 HTML 요소에 이벤트가 발생했을 때, 해당 요소에서 상위 요소까지 이벤트가 전달되는 동작 방식이다. 이벤트 버블링은 기본적으로 모든 이벤트에 적용되며, 특정 요소에서 발생한 이벤트가 해당 요소의 상위 요소로 전파되어 간다.

예를 들어, 다음과 같은 HTML 코드가 있다고 가정해보자.

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

여기에서 button 요소를 클릭하면, 클릭 이벤트가 button 요소에서 발생하게 된다. 이벤트 버블링이 적용된 경우, 클릭 이벤트는 button -> inner -> outer 요소로 전달되어 갑니다. 이 때, 전달되는 이벤트 객체는 event.target 속성으로 현재 클릭된 요소를 가리킨다.

이벤트 버블링은 이벤트를 전파하는 순서를 변경할 수 없다. 이벤트 버블링을 막는 방법으로는 event.stopPropagation() 메소드를 사용할 수 있다. 이 메소드를 호출하면, 현재 이벤트의 상위 요소로 이벤트가 전파되지 않는다.

document.getElementById('btn').addEventListener('click', function(event) {
  console.log('Button clicked!');
  event.stopPropagation(); // 이벤트 전파 막기
});

이벤트 버블링은 상위 요소에 이벤트를 하나만 등록해도 하위 요소의 이벤트 처리를 할 수 있게 해준다. 이것을 이벤트 위임이라고 한다. 이는 이벤트를 부모 요소에만 만들면 되어서 편리하게 해주지만, 의도치 않은 동작을 일으킬 수도 있다. 예를 들어, 하위 요소에 있는 이벤트 핸들러가 상위 요소에서 똑같이 등록되어 있을 경우, 이벤트가 중복해서 처리될 수 있다.

즉, 이벤트 버블링은 이벤트가 하위에서 상위 요소로 전파되는 것

event.target과 event.currentTarget의 차이점

JavaScript에서 이벤트가 발생하면, 해당 이벤트가 발생한 요소(element)가 이벤트를 처리하는 메서드를 호출한다. 이때 이벤트 객체(event object)가 생성되며, 이 객체는 이벤트가 발생한 요소와 관련된 정보를 담고 있다.

이벤트 객체에는 target과 currentTarget 두 개의 속성이 있다.

target 속성은 이벤트가 발생한 요소(element)를 가리킨다. 이 속성은 이벤트 버블링과 이벤트 캡처링 중 어떤 방식으로 이벤트가 전파되었는지에 상관없이 항상 이벤트가 발생한 요소를 가리킨다.

반면에 currentTarget 속성은 이벤트가 현재 처리되고 있는 요소(element)를 가리킨다.

이벤트 캡쳐링 형식으로 이벤트가 걸려있는 상황이라면 currentTarget은 최상위 요소부터 이벤트가 발생한 요소까지 순서대로가 되며,
이벤트 버블링 형식으로 이벤트가 걸려있는 상황이라면 currentTarget은 이벤트가 발생한 요소부터 최상위 요소까지 순서대로가 된다.