[Browser] Event 등록, 버블링, 캡쳐, 중지, 위임

Event 등록 방법

모두가 알고 있을 것이다.

document.getElementById("root)".addEventListener(eventName, callBack)

이 외에도 JQuery로 관리하는 방법도 있고, 다른 Javascript Library를 사용한다면 그 Library에 맞게 관리할 수 있다.

반드시 Javascript로 관리하라는 법은 없고, HTML 상에서 DOM 요소에 onClick 이벤트를 심어줄 수도 있다.

<div id="root" onClick= ... />

Event 버블링

DOM Event가 발생하게 될 경우 Event는 하위 요소 → 상위 요소로 전달된다는 내용이다.

이해하기 쉽게 코드로 보도록 하자.

<!-- HTML -->
<div class="one">
    <div class="two">
            <div class="three" />
    </div>
</div>

// Javascript
document.querySelectorAll('div')
    .forEach(function(div) {
        div.addEventListener('click', function(event) {
            console.log(event.currentTarget.className);
        })
    }

위 코드를 실행하고 div를 클릭했을 때의 console.log에 찍히는 순서는 아래와 같다.

1. three
2. two
3. one

분명 one이 최상위 객체인데 console.log(); 가 먼저 발동되는 항목은 three인 것을 알 수 있다.

 

이 현상을 Event 버블링이라고 한다.

Event 캡쳐

Event 버블링의 반대 방향으로 전파하는 방법이다.

즉, 상위 요소 → 하위 요소로 전달된다는 것이다.

사용하는 방법은 아래와 같이 Javascript를 수정하면 된다.

// Javascript
document.querySelectorAll('div')
    .forEach(function(div) {
        div.addEventListener('click', function(event) {
            console.log(event.currentTarget.className);
        }, { capture: true })
    }

실행 값

1. one
2. two
3. three

Event 중지

Event 버블링, 캡쳐를 모두 사용 안하고 전파를 하지 않고 싶을 때 사용한다.

(버블링과 캡쳐를 신경쓰며 개발을 할 시간도 없고, 나는 그런 복잡한거 모르겠고 일단 빨리 개발이나 해야해. 라고 했을 때 사용된다.)

// Javascript
document.querySelectorAll('div')
    .forEach(function(div) {
        div.addEventListener('click', function(event) {
            event.stopPropagation();
            console.log(event.currentTarget.className);
        }, { capture: true })
    }

위처럼 Captrue가 진행되었을 때에 Console.log() 출력 값은 "one"이 되고, Capture를 하지 않을 때에는 "three"가 된다.

 

Event 위임

상위 요소에 Event를 추가해 버블링으로 자연스러운 이벤트를 발생 시키는 방법이다.

하위 요소에 Event 등록 후 하위 요소를 추가하게 될 경우 addEventListner가 작동이 안되는데 그 증상을 막기 위함이다.

 

예를 들어 위 코드에서 addEventListner 이후 "two" class 안에 div를 더 추가했다고 해보자.

그렇다면 당연히 Javascript는 addEventListner를 통해 모든 div에 이벤트를 추가하고, 이 후에 div를 추가하게 된다.

(이 때 이 후에 생긴 div에는 Event가 등록되지 않는다.)

 

그 증상을 막고자 하여 div 전체에 이벤트를 등록하는 것이 아닌 상위 요소에 이벤트를 등록하여 하위 요소 모두에게 이벤트를 부여하는 것이다.

(이벤트 버블링을 이용)

// Javascript
document.querySelector('.one')
    .addEventListner(function(event) {
        console.log(event.currentTarget.className);
    })

 

물론 Angular.js, React.js, Vue.js와 같은 Library를 사용하게 되면 Javascript 딴에서 동적으로 DOM 요소를 추가할 일이 없을 것이니 요즘은 잘 쓰이지 않는 것 같다.