이벤트 버블링에 대하여...

<회고록>

오늘은 이벤트 버블링에 대해서 다룰려고 한다. 여기서 의문이 1가지 정도 들 수 있다.

바로 왜 이벤트 버블링에 대해서 조사하느냐다. 나는 이벤트 버블링을 조사하는 이유는 2가지가 있다.

    1. 면접에 자주 나오는 개념이기에

    2. 개발하면서 왜 이렇게 동작하는 지를 찾고 싶어서

그럼 이번에는 2가지 이유를 토대로 한번 이벤트 버블링에 대해서 설명하겠다.

 

1. 이벤트 버블링 도대체 왜 면접에서 많이 물어보는가?

이 이유를 알기 위해서는 먼저 이벤트 버블링이 무엇인지 부터 확인해야 한다.

이벤트 버블링은 말 그대로 이벤트가 점차 버블링한다는 것을 의미한다.

하지만 이렇게 집고 넘어가면 나중에 실전에서 이벤트 버블링을 사용하기가 매우 곤란해진다.

그래서 이 개념에 대해서 구체적으로 집고 넘어가겠다.

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

만약 다음과 같은 코드가 있다고 하자! 이 코드를 실행시키면 div를 클릭했을때 경고창이 나오는 것을 확인할 수 있다.

하지만 div뿐 만 아니라 em,code를 눌러도 똑같이 경고창이 실행되는 것을 확인할 수 있다.

바로 이때 em,code를 눌렀을때도 경고창이 나오는 이유가 이벤트 버블링 때문에 그렇다.

자식 dom의 이벤트처리를 하고 그 다음으로 부모 dom의 이벤트 처리를 하고 점차 이런식으로 버블링되면서 최종적으로는 document,window까지 이벤트가 버블링된다. 이때 이벤트가 물방울이 점차 커져가는 모습에서 버블링이라는 이름을 붙였다.

그럼 왜 이벤트 버블링 개념이 존재하는 것이고 왜 면접에서 물어보는 것일까? 

이벤트 버블링은 자식 Dom들이 따로 이벤트를 정의하지 않아도 상위 Dom에서 이벤트를 인지하고 이벤트를 처리할 수 있게 해주기 때문이다. 즉 이벤트 버블링은 안 좋은 개념이 아니라 html,js에서 정말 장점중 하나다.

코드의 유지보수 비용이 낮아지고 코드의 간결성은 높아지며 이벤트 버블링을 통한 코드 튜닝도 가능하기 때문이다.

2. 이벤트 버블링 사실은 우리도 쓰고 있었다!

우리도 사실 이벤트 버블링에 대해서 사용하고 있었다. 개발을 하다보면 다음과 같은 상황에서 "왜 이러지"라는 생각을 한 적이 있을 것이다.

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

 난 분명 div에 onclick을 주었는데 그 하위 요소들도 클릭 이벤트가 발생하는 경우가 있을 것이다. 바로 이런 경우가 이벤트 버블링 때문에 그런 것이다. 즉 자식 DOM에게 개별적으로 클릭 이벤트를 붙여줄 필요 없이 자동적으로 이벤트 버블링으로 인해서 처리할 수 있다는 장점을

우린 모르고 있었던 것이다. 앞으로는 이런 현상이 왔을 때 "아 이벤트 버블링 때문에 그런 거구나~~"라고 생각하면 좋을 거 같다!