HTML 이벤트의 흐름

HTML 문서의 각 엘리먼트들은 아래와 같이 태그 안의 태그가 위치하는 식으로 계층적으로 이루어진다. 이러한 계층적 구조 특징 때문에 만일 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어나게 된다.

예를 들어 아래 3개가 중첩된 박스 영역 안에서 가장 자식 엘리먼트인 p 박스를 클릭하면 onclick 이벤트 스크립트가 p뿐 아니라 그의 부모인 div와 form 엘리먼트도 발생함을 볼 수 있다.

<form onclick="alert('form')">FORM
    <div onclick="alert('div')">DIV
    	<p onclick="alert('p')">P</p>
    </div>
</form>

이러한 현상을 이벤트 전파라고 부르며, 전파 방향에 따라 버블링과 캡처링으로 구분한다.

어떤 전파 방향을 사용할 것이냐는 자바스크립트 설정을 통해 제어할 수 있으며, 둘을 동시에도 사용할 수 있다.

이벤트 전파가 일어나는 이유?

자식 요소가 부모 요소 영역 안에 위치하고 있기 때문에, 자식 요소만을 클릭하였다 하더라도 다른 시각으로 보면 부모 요소도 클릭한 셈이 되기 때문이다.

또한, 이벤트 전파 덕분에 이벤트 등록 코드를 줄일 수 있다는 장점도 있다. 만약 여러 개의 리스트가 있을 때, 몇 번째 리스트를 클릭하든 이벤트를 발생시키고 싶을 경우를 생각해 보자. 이벤트 전파 개념이 없다면 li 요소마다 일일히 이벤트를 등록해야만 한다. 하지만 버블링의 특성 때문에 우리는 그 부모 요소인 ul에만 이벤트를 등록해서 원하는 기능을 짧게 구현할 수 있다.

버블링

버블링은 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 버블같아서 이름이 지어졌다.

버블링 등록

브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파된다.

자바스크립트 addEventListener() 함수로 요소에 이벤트를 등록하면 기본적으로 버블링 전파 방식이 흐르게 되어, 만일 자식 요소에 이벤트가 발생하면 부모 요소도 버블링을 통해 이벤트가 전파되어 리스너가 호출되게 된다.