[javascript] 이벤트 전파(버블링)

동료분이 아래 와 같은 구조의 html을 작성하고 해당 영역 클릭 시 a에 이벤트를 추가해 a의 엘리먼트를 받기를 기대으나, div 엘리먼트가 리턴되어 이해가 안된다고 하셔 event.target이 아닌 event.currentTarget 속성을 사용해보길 전달드렸다.

왜 이건 되냐 되물어보셔서 정확하게 알고 있지는 않고 여러 속성을 호출해 보다 알게되어 이번기회에 내용을 정리하려고 한다.

 

문제?

a클릭 시 a event에 div요소가 리턴됨.

<a id="aTag">
<div id="divTag"> ...
</div>
</a>

<script>

    document.getElementById('aTag').addEventListener('click', event => {
        console.log(event.target);
    });

</script>

해결?

동료분이 a 태그를 클릭했다고 생각한이유는 이미지와 같이 a가 div를 감싸고 있다고 생각하고 계셨기 때문입니다.

div에 이벤트가 없기 때문에 a 이벤트가 바로 호출되어 a태그 요소가 리턴될 것이라고 기대한 것입니다.

동료분이 그린 태그 구조

• 방법1
  • event.currentTarget을 호출해 이벤트가 부착된 실제 요소를 가리킵니다.
    +)event.target은 이벤트가 발생한 요소를 가리킵니다.
• 방법2
  • this 호출 (위와 동일하게 이벤트 핸들러가 부착된 요소를 가리킵니다.)

HTML 이벤트 흐름

HTML 문서는 트리 구조로 구성됩니다.  <a> 태그는 부모 요소이고, <div> 태그는 자식 요소입니다. 이 계층구조는 이벤트가 발생할 때 중요한 역할을 합니다.

이벤트 흐름에는 두 가지 캡처링과 버블링 단계가 있습니다.

1. 캡처링 단계: 이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 내려갑니다.
2. 버블링 단계: 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 올라갑니다.

기본적으로 이벤트는 버블링 단계에서 처리됩니다. 즉, 이벤트가 발생한 요소에서 시작하여 부모 요소로 전파됩니다.

 

이벤트 버블링 과정

1. 사용자가 <div> 태그를 클릭합니다.
2. 클릭 이벤트가 발생하고, 이벤트 객체가 생성됩니다.
3. 이벤트 객체의 target 속성은 클릭된 요소인 <div>를 가리킵니다.
4. 이벤트는 버블링 단계에서 부모 요소인 <a> 태그로 전파됩니다.
5. <a> 태그에 부착된 이벤트 핸들러가 실행됩니다.
6. 이벤트 핸들러에서 event.target을 출력하면, 클릭된 요소인 <div>가 출력됩니다.

이벤트 객체 생성 과정

1. 이벤트 발생: 사용자가 <div> 요소를 클릭합니다.
2. 이벤트 객체 생성: 브라우저는 클릭 이벤트를 감지하고, 이벤트 객체를 생성합니다. 이 객체는 클릭된 요소(target), 이벤트 타입(type), 이벤트가 발생한 좌표 등 다양한 정보를 포함합니다.
3. 이벤트 전파: 생성된 이벤트 객체는 이벤트 전파 과정을 통해 상위 요소로 전달됩니다. 이 과정에서 이벤트 객체는 동일하게 유지됩니다.
4. 이벤트 핸들러 호출: 이벤트가 핸들러에 도달하면, currentTarget 속성이 설정됩니다. 이 속성은 이벤트 핸들러가 부착된 요소를 가리킵니다.

<div> 요소에 직접 이벤트 핸들러가 부착되지 않았더라도, 이벤트 객체는 클릭된 요소에 대한 정보를 포함하고 있으며, 이를 통해 event.target이 <div>를 가리키게 됩니다.

 

event.currentTarget은 이벤트가 핸들러에 도달할 때 설정됩니다.