자바스크립트 이벤트 전파

글을 쓰게된 이유...

기술 교육시간 때 자바스크립트에 대한 수업을 했다. 이미 한 번 해본 내용이었는데 자바스크립트에 대한 기본적인 개념이 많이 부족했다고 느꼈다.. 그런데 중간에 이벤트에 대한 설명이 있었는데 그 부분에 대해 이해하지 못해서 이렇게 정리를 해본다!!

 

자바스크립트 이벤트

1. 이벤트(event)는 어떤 사건을 의미한다.
   1. 사용자가 버튼을 클릭했을 때 등 일어난다.
2. 이벤트는 언제 일어날지 모르기 때문에 사용자의 행위를 예측하여 미리 사용할 수 있도록 다양한 이벤트를 준비한다.
3. 많은 DOM 요소는 이벤트를 받고, 받은 이벤트를 처리하는 코드를 실행한다.
4. 대게 EventTarget.addEventListener()를 이용합니다.

중첩된 많은 요소가 이벤트를 가지고 있다면 이벤트 처리가 복잡해질 수 있다.
그래서 이때, 이벤트 처리 순서는 이벤트 확산과 캡처 설정에 따라 달라진다.

 

이벤트 전파

<div id = "div1">
    첫번째 div영역
    <div id = "div2">
        두번째 div영역
        <div id = "div3">
            세번째 div 영역
        </div>
    </div>
</div>

이때

$("#div1").on("click",function(event){
    console.log("첫번째 div영역 입니다.")
});
$("#div2").on("click",function(event){
    console.log("두번째 div영역 입니다.")
});
$("#div3").on("click",function(event){
    console.log("세번째 div영역 입니다.")
});

이렇게 각 div 마다 이벤트를 실행하고 세번째 div 영역을 클릭한다고 하면 세번째 div 뿐만 아니라 첫번째, 두번째 div까지 모두 수행된다.

(이유는 이벤트 루프와 이벤트 콜백에 대해 살펴보면 알 수 있다.)

 

캡처링

이벤트 캡처링은 특정 화면 요소에서 이벤트가 발생했을 시 상위요소 -> 하위요소로 이벤트가 진행된다.

즉, 위의 예제로 본다면 div3을 클릭했을 때

첫번째 div영역 입니다.
두번째 div영역 입니다.
세번째 div영역 입니다.

순으로 실행된다.

eventTarget.addEventListener('click',(event) => {
}, true);

이벤트 리스너에서 마지막 인자에 true를 넣으면 실행된다.

 

버블링

이벤트 버블링은 캡처링과 반대로 하위요소 -> 상위요소로 이벤트가 진행된다.

위의 예제로 본다면 div3을 클릭했을 때

세번째 div영역 입니다.
두번째 div영역 입니다.
첫번째 div영역 입니다.

순으로 실행이 된다.

 

eventTarget.addEventListener('click',(event) => {
}, false);

이벤트 리스너에서 false를 넣으면 버블링으로 실행된다.

 

이벤트 전파 중단

하지만 모든 이벤트를 실행하고 싶지 않을 때가 있다!!!! 그럴때 쓰이는 함수가 있다.

event.stopPropagation();

function stopEvent(event) {
  ev.stopPropagation();
}

eventTarget.addEventListener("click", stopEvent, false);

 

참고

poiemaweb.com/js-event

developer.mozilla.org/en-US/docs/Web/API/Event

 

Event - Web APIs | MDN

Event | PoiemaWeb