[자바스크립트] 버블링을 이용해 이벤트 등록하기

우선 이벤트의 단계중 버블링의 개념에 대해 알아야한다.

 

이벤트의 마지막 단계인 버블링은 타게팅 이후 document로 돌아가는 과정인데 

버블링을 활용해서 이벤트를 등록하는 방법을 알아본다.

 

stopPropagation( ) - 버블링 중단

div안에 버튼 두개를 만들고

세 개의 노드에 클릭 시 콘솔을 띄워주고

bubbles값이 true가 나오는지 확인해 버블링이 발생하는지 알아보는 이벤트를 등록한다.

버블링 처리 버튼을 누르면 btn1과 panel에서 반응이 온다.

이는 btn1에서 클릭이벤트의 타게팅이 이뤄지고 다시 돌아가는 버블과정에서 panel을 지나치기 때문이다.

이번엔 버블링 중지 버튼을 눌렀고 #btn2에 등록된 이벤트내용중 stopPropagation메소드로 인해

버블링이 중단되어 panel로 흘러가지 않음을 알 수 있다.

이제 버블링의 흐름을 활용해본다.

 

[효율성] 하나의 리스너 등록으로 여러 태그에 이벤트 등록

li태그 다섯개에 모두 이벤트를 등록하려고 한다.

위의 방법은 li태그에 일일히 총 5개의 이벤트를 달아준다.

li에 직접 타게팅이 일어나 클릭된 태그의 내용을 알림창에 띄워주게 된다.

이번엔 버블링을 이용한 이벤트 등록이다.

menu클래스를 가진 ul태그 단 하나에만 이벤트를 등록한다. 대신 선택자 'li' 를 추가하게된다.

이는 li에 직접 타겟을 한 위의 방법과 다르게

li를 찍고 돌아오는 과정에서 ul태그를 만나 이벤트를 실행하게 되는 것이다.

결국 5개의 li태그의 이벤트흐름 모두 ul태그를 거치게 된다.

콘솔로그의 e.target.tagName 값이 LI로 나온것을 보아

해당 이벤트의 타게팅은 li에 되어있는 것을 알 수 있다.

그리고 타게팅 후 버블단계에서 ul의 이벤트만 실행하면 되므로

li에 모두 이벤트를 달아줄 필요없이 하나의 리스너로 같은 효과를 낼 수 있다.

 

앞으로 추가될 노드에 미리 이벤트 등록 가능

추가 버튼을 클릭하면 li태그들을 생성하도록 하고

li태그들에 이벤트를 등록해봤다.

메뉴 5까지는 알림이 뜨지만 새로 추가된 li태그들엔 아무 반응이 없다.

이미 이벤트가 등록된 후에 생성한 태그에는 이벤트가 등록되지 않는다.

위와 같이 이벤트가 미리 등록된 후 태그가 추가되어서 문제가 생겼다면

처음부터 태그 추가 과정에서 이벤트를 붙여서 찍어낼 수도 있을 것이다.

그러나 버블링을 활용하면 위와 같은 방식보다 더 간단하게 해결이 가능하다.

앞으로 생성될 li태그는 무시하고 이미 존재하는 ul태그에 이벤트를 걸어준다면

li를 찍고 돌아오는 과정에서 이벤트가 발생하여 생성될 li태그가 ul태그 안에 존재하는 이상 이벤트가 발생한다.

li태그를 몇개를 생성해도 ul태그를 지나치는 이상 모두 이벤트가 발생했다.