event bubbling이란...

특정 HTML element를 click 했을 때, 해당 element가 지닌 event와 그 element가 포함된 상위의 elements의 event가 순차적으로 동작하는 것을 의미한다. 의도한 event외에 다른 event 또한 동작할 수 있다는 점에서 문제가 발생할 수 있다.

그게 무슨 말이냐 하면

js로 html element에 onClick event를 추가하다보면, 현재 의도하는 element뿐만 아니라 해당 element의 상위 elements에도 event가 계층적으로 부여되는 경우가 생길 수 있다. 흔한 경우는 아닐거라 생각하지만(아직 제대로 된 웹 사이트도 안 만들어 본 사람이 판단할 내용은 아닌 것 같지만...), 만약 그런 경우가 생긴다면 사용자의 click에 발생하는 event는 child element부터 parent element까지 순차적으로 모두 발생한다.

한 마디로 click하는 element가 포함되어 있는 element set에서 해당 element의 ancestor element의 event가 모두 실행된다.

(Java의 "상속" 개념과 비슷한 구석이 있다고 생각했다.)

그럼 어떻게 해결하나

bubbling이 일어나지 않길 바라는 event에 "e.stopPropagation()" 함수를 추가해주면 해결된다.