이벤트 버블링(Event bubbling)

각 form, div, p 태그의 영역을 클릭하면 alert를 실행하는 코드를 작성하였습니다.

 

form, div, p 태그의 영역

 

1.  form 태그 영역(red)을 클릭할 경우

form의  alert 실행

2. div 태그 영역(blue)을 클릭할 경우

form 태그의 alert 실행 후

div 태그의 alert 실행

3. p 태그 영역(green)을 클릭할 경우

 위에서 자식 태그인 div태그를 클릭하면 div의 alert뿐만 아니라 부모 태그인 form의 alert까지 실행되는 것을 확인할 수 있었습니다. 

 따라서 p 태그를 클릭할 경우 p의 alert 발생 후 div, form 태그 순으로 실행될 것입니다.

 

이와 같이 자손 태그의 이벤트가 부모 태그에 전파되는 현상을 이벤트 버블링이라고 합니다.

 

그렇다면 이러한 현상을 막을 수 있는 방법은 무엇이 있을까요?

 

stopPropagation

event를 매개변수로 받은 후 event객체의 stopPropagation함수를 실행하는 코드를 작성해줍니다.

그리고 해당 코드를 실행 후 p 태그를 클릭하면

p의 alert만 발생하고 div, form태그의 alert는 실행되지 않습니다.