프론트 이벤트 버블링에 관하여

아래 코드에서 우리는 em부분을 클릭해도
div에 할당된 핸들러가 동작한다.
이것은 어떻게 가능한 것인가?

<div onclick="alert('div에 할당한 핸들러!')">
  <em>
     <code>EM</code>을 클릭했는데도      <code>DIV</code>에 할당한 핸들러가 동작합니다.
</em>
</div>

바로 버블링이 발생하기 때문이다

버블링

버블링이랑
특정 화면 요소에서 이벤트가 발생했을 때
이벤트가 더 상위의 화면 요소들로 전달되어가는 것이다.

마치 vue에서 emit을 통해 부모 컴포넌트로 이벤트를 발생시키는 것과 비슷한 개념 같다.

한 요소에서 이벤트가 발생하면
이 요소의 이벤트 핸들러가 동작하고 부모의 핸들러가 동작한다.
이 과정을 최상위 요소를 만날 때까지 반복한다.

<div onClick="alert("div")">
  부모요소
    <p onClick="alert("p")">자식 요소</p>
</div>

이런 구조에서 p를 클릭한다면
p의 핸들러를 동작하고 부모인 div의 핸들러를 동작하게 된다.

따라서 p alert가 동작하고 div alert 가 동작하는 것이다.

이러한 일련의 동작을 이벤트의 버블링이라고 한다.

• 거의 모든 이벤트는 버블링이 작동하지만
  focus와 같은 일부 이벤트는 버블링이 작동하지 않는다.

그럼 어디서 이벤트가 일어났는지는 어떻게 알 수 있는가?

이벤트 핸들러의 파라미터로 들어오는
event 객체를 통해 알 수 있다.

form.onclick = function(event) {
 console.log('target : '+event.target.tagName)
 console.log('this : ' + this.tagName)
};

이벤트 핸들러 내에서는 this라는 요소와
event라는 요소를 사용할 수 있다.

this는 이벤트 핸들러가 존재하는 부모 요소를 가리키고
event.target은 이벤트가 최초 발생한 자식 요소를 가리킨다.

<form onClick = ...>
  <div>
    <p></p>
  </div>
</form>

이런 구조일 때 위의 이벤트를 form 에 적용했다고 가정해보자
이 상황에서 p를 클릭하면

target : p
this : form

으로 결과값이 발생합니다.