javascript_in_depth_6

디자인 패턴 실용 - 이벤트 델리게이션 패턴

용도

다수의 HTML에 이벤트를 걸어야 할 때, 활발한 이벤트 처리가 필요할 때 구성하면 좋다.
간단한 개념은 대표 DOM에만 이벤트를 걸어서 처리하는 패턴이다.

이벤트 캡처링과 버블링

이벤트 버블링 : 특정 DOM에서 이벤트가 발생하면 가장 하위 DOM 부터 상위의 부모 DOM으로 한단계씩 전파되는 것 이벤트 캡처링 : 최상위 부모 DOM 부터 가장 하위의 DOM까지 부모에서부터 전파되는 것

javascript_in_depth_6_1

이벤트 전달 세 단계

캡처링 단계 : 이벤트 객체가 window 객체로부터 대상 부모까지 순서대로 전달되는 단계
대상 단계 : 이벤트 객체가 이벤트 대상에 도달하는 단계로 대상에 도달했을 때 버블링을 하지 않으면 버블링은 생략된다.
버블링 단계 : 이벤트 객체가 대상 부모부터 window 객체까지 역순으로 전파된다.

활용

다수의 DOM에 한꺼번에 이벤트 리스너를 할당해야 할 때
동적인 DOM에 이벤트리스너를 그때그때 할당해야 할 때

예를 들어, 10000개의 Cell에 이벤트를 할당해야 하는 경우, 초기화 단계에서 이벤트리스너를 할당하느라 멈칫거리게 되어 사용자 경험이 나빠질 수 있다. 따라서 초기화 단계에서 많은 이벤트 리스너를 할당하기보다는 간단하게 하나의 부모 DOM에 이벤트리스너를 할당하여 관리하는 방법이 있다. 이것이 바로 이벤트 델리게이션 디자인 패턴이다.

이벤트 캡처링이나 버블링을 해야해서 <body>처럼 아주 상위의 DOM에 이벤트를 걸게 되면 각각의 모든 이벤트를 처리하는 데 필요한 자원이 직접 HTML DOM마다 이벤트를 거는 것보다 많을 수 있다. 따라서 이러한 초기화 단계에서의 사용자 경험과 이벤트가 발생하고 나서의 사용자 경험의 차이를 잘 고려하여 적당한 선의 wrapper를 결정해서 이벤트 델리게이션 패턴을 사용하는 것이 좋다.

예제

이벤트 델리게이션 패턴을 사용하면서 class나 data-*등과 같은 속성을 이용해 어느 DOM에서 클릭 이벤트가 일어났는지 구분하여 처리할 수도 있다.

<html>
<body>
    <video style="width:480px" id="videoBunny" src="http://media.w3.org/2010/05/bunny/movie.ogv">
    </video>
    <div id="controlPanel">
        <button id="play">Play</button>
        <button id="pause">Pause</button>
        <button id="volumeUp">Volume+</button>
        <button id="volumeDown">Volume-</button>
    </div>
    <script>
    (function () {
        var divControlPanel = document.getElementById("controlPanel"),
            videoBunny = document.getElementById("videoBunny");
        divControlPanel.addEventListener("click", function (e) {
            var target = e.target || e.srcElement;
            if (target.id === "play") {
                videoBunny.play();
            } else if (target.id === "pause") {
                videoBunny.pause();
            } else if (target.id === "volumeUp") {
                if (videoBunny.volume <= 0.9) {
                    videoBunny.volume += 0.1;
                } else {
                    videoBunny.volume = 1;
                }
            } else if (target.id === "volumeDown") {
                if (videoBunny.volume >= 0.1) {
                    videoBunny.volume -= 0.1;
                } else {
                    videoBunny.volume = 0;
                }
            }
            // 이벤트에 대한 전파를 막는다
            event.stopPropagation();
        }, true);
    }());
    </script>
</body>
</html>

Example

javascript_in_depth_6

디자인 패턴 실용 - 이벤트 델리게이션 패턴

용도

이벤트 캡처링과 버블링

이벤트 전달 세 단계

활용

예제

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally