말 그대로 이벤트가 중첩해서 일어나는 이슈이다.
EventBubbling의 예시를 보면 쉽게 이해가 가능하다.
특정 시점에서 이벤트를 다량으로 반복하거나, 클릭을 통해 이벤트 반복을 과다하는 경우
모두 이벤트 중첩에 해당하는 이슈이다.
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
위 html 구문을 구현한 상태에서 P를 누르면 P > DIV > FORM alert가 차례로 발생한다.
event.target
해당 객체에 대한 event 발생시,
event는 최초 발생 지점인 target 지점에서 이벤트 발생 요소를 객체화 한다.
Bubbling
그 Event는 target event(요소)를 거쳐, document 및 최상위 객체를 만날 때까지 지속적으로 Event를 실행하게 된다.
중단하고 싶은 target event 시점 및 요소에서 Bubbling을 방지하는 method를 호출하면 그 시점에서 Bubbling은 더이상 발생하지 않는다.
EventBubbling
https://ko.javascript.info/bubbling-and-capturing