목표: 브라우저가 어떻게 이벤트를 감지하고 그에 따라 우리는 어떻게 이벤트를 다뤄야 하는지에 대해 알아보자.
이벤트 버블링(event bubbling)은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 이벤트가 처리된 후, 상위 요소로 이벤트가 전파되는 현상을 말합니다. (Trigger clicks all the way up) 이벤트 버블링은 이벤트가 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 장점이 있습니다. 즉, 이벤트를 처리하는 핸들러 함수를 부모 요소에 등록해놓으면, 자식 요소에서 발생한 이벤트도 모두 처리할 수 있습니다. 이를 활용하면, 여러 개의 하위 요소에서 발생하는 이벤트를 하나의 이벤트 핸들러로 바인딩하는 이벤트 위임 처리를 할 수 있습니다.
이벤트 버블링
이벤트 흐름 3단계
//이벤트 버블링
<style>
body * {
margin: 10px;
border: 1px solid rgb(255, 2, 74);
}
</style>
<div class="DIV1">
DIV1
<div class="DIV2">
DIV2
<div class="DIV3">DIV3</div>
</div>
</div>
<script>
const divs = document.querySelectorAll("div");
const clickEvent = (e) => {
console.log(e.currentTarget.className);
};
divs.forEach((div) => {
div.addEventListener("click", clickEvent);
});
</script>
JavaScript
복사
//onclick
<body>
<div class="DIV1">
DIV1
<div class="DIV2">
DIV2
<div class="DIV3">DIV3</div>
</div>
</div>
<script>
const divs = document.querySelectorAll("div");
divs.forEach((div) => {
div.addEventListener('click',function(event){
console.log(event.currentTarget.className);
};
});
</script>
</body>
JavaScript
복사
이벤트 전파(흐름)가 있는 이유
이벤트 버블링과 캡쳐링의 차이점에 대해서 구분해서 인지한다.
이벤트 위임 패턴을 이해한다.
stopPropagation() 이란?
출처:
•
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지, 캡틴판교
•
버블링과 캡처링, 모던 JavaScript 튜토리얼
•
이벤트 위임(Event Delegation)이란?, tstory blog
•
•
추가자료: 이벤트 핸들러 내부의 this
