자바스크립트(JavaScript) - 이벤트 버블링이란?

 

자바스크립트(JavaScript) - 이벤트 버블링이란?

 

 

 

이벤트 버블링이란 무엇일까?

 

- 어떤 하나의 요소에 이벤트가 발생하게 되면, 해당 이벤트가 동작한 뒤에 부모 요소의 이벤트 핸들러가 이어서 작동하게 되는데, 이 현상은 부모요소를 계속 거슬러 올라가 윈도우 객체를 만날때까지 진행되고, 자식요소부터 부모요소, 그 부모요소의 부모 요소 로 계속 올라가는 현상이 마치 거품이 올라가는 현상과 비슷하여 이것을 이벤트 버블링이라고 한다. 

 

 

 

 

 

한 번 확인해보자.

 

다음과 같은 html 코드와 js 코드가 있다.

 

 

 

 

 

 

여기서 빨강,주황,노랑,초록,파랑 버튼을 클릭하게 되면 콘솔에 어떻게 나타날까?

 

 

 

이렇게 세개의 텍스트가 출력되는 것을 확인할 수 있다.

 

아니 item Event 가 출력되는건 이해하겠어.

 

근데 list Event 와 content Event는 왜 출력되는거지? 얘네 둘은 content와 list를 클릭했을때 출력하라고 설정했는데?

 

바로 여기서 이벤트 버블링이 발생한 것이다.

 

 

 

html 코드를 다시 살펴보면 item 클래스를 가지고 있는 button의 부모요소는 list id 를 가진 ol 태그이다.

 

그 형제로는 tile id를 가진 h1 태그가 있고, 이 둘의 부모요소는 content 라는 id 태그를 가진 div 태그이다.

 

아까 위에서 어떤 하나의 요소 태그에 이벤트가 발생하게되면, 그 이벤트가 실행되고 부모요소의 이벤트도 동작한다고 하였다.

 

이 과정을 적용해보면

 

item class 에서 이벤트가 발생하였고 -> 그 부모요소인 ol태그로 올라가 이벤트를 발생시킨다. 그래서 list Event가 출력되는 것이다. -> 이후 또 그 부모요소인 div 태그로 올라가 이벤트를 발생시킨다.

 

여기서 h1 태그의 이벤트가 발생하지 않은 이유는 ol 태그의 부모요소가 아닌 형제요소이기 때문이다.

 

 

 

div 태그에서 더 거슬러올라가면 윈도우 객체를 만나게 되고 이 이벤트 버블링은 종료된다.

 

(div -> body -> html -> document -> window -> 종료)

 

이 과정이 바로 이벤트 버블링 이다.

 

 

 

 

그렇다면 버튼이 아닌 제목을 클릭했을때는?

 

 

 

우리의 예상대로 h1 이 가지고 있는 title id 의 이벤트를 발생시키고 그 부모요소인 div 태그로 올라가 이벤트를 발생시킨다.

 

 

 

 

당연히 div 태그만을 클릭하게되면

 

 

이와 같이 content 이벤트만 발생하게 된다.

 

 

 

깊이 파일수록 거슬러올라가 부모요소가 많아져 더 많은 이벤트를 발생시키고, 상위 요소를 클릭할수록 이벤트 버블링이 적게 일어나 출력되는 값이 적어지는 것이다.

 

 

 

 

 

e.currentTarget을 사용해서 해당 이벤트가 발생할때의 currentTarget을 출력해보면,

 

이와 같이 출력되는 것을 확인할 수 있다.

 

위에서 설명한 것과 동일하다.

 

 

 

 

만약 버블링을 멈추고 싶다면?

 

 

멈추고 싶은 구간에 

e.stopPropagation();

을 작성한다.

 

 

list id 태그 이벤트에 작성하고 버튼을 클릭해보면,

 

 

 

이와 같이 list id 태그의 이벤트까지만 발생시키고 버블링을 중단시켜, 부모요소인 div 태그로 더이상 올라가지 않는 것을 확인할 수 있다. 

 

 

 

 

 

*이것과 반대로 이벤트가 상위요소에서 하위요소로 전파되는 것은 이벤트 캡쳐링 이라 한다.