이벤트 버블링 다루기

Event Bubbling

특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 화면 요소들로 전달되는 특성

• 브라우저는 해당 요소의 부모 요소가 해당 이벤트 핸들러가 등록되어있는지 보고, 등록되어 있으면 실행한다.
• 다음 부모 요소로 이동하여 까지 같은 과정을 반복한다.

올바르게 Event Bubbling 다루기

• event.currentTarget 이벤트가 등록되어 있는 요소
  
• event.target 이벤트를 작동시킨 요소
  

위 2가지 프로퍼티를 이용하여서 원하지 않은 event bubbling을 다음과 같이 제어할 수 있다.

if (event.currentTarget != event.target) {
	return;
}
event.stopPropagation(); // bad, very bad!!!!
// 이벤트 자체가 전달이 안되기 때문에 규모 커지만 문제생길수도

References

• https://stackoverflow.com/questions/5921413/difference-between-e-target-and-e-currenttarget
• https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
• https://pakss328.medium.com/currenttarget-vs-target-b9dcdb8911ea