이벤트 델리게이션 패턴(event Delegation Pattern)

작성일 | In

정의

  • 다수의 DOM 엘리먼트에 이벤트를 거는것이 아니라 대표 DOM 에 이벤트를 걸어서 처리하는 패턴

작동원리

  • HTML 에서 이벤트 버블링을 통해 이벤트를 상위 DOM 에 전달하는것에서 위임함

이벤트 전달과 DOM 이벤트 처리

이벤트 전파 중단

이벤트 델리게이션 패턴을 사용하는 예

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

이벤트 델리게이션 패턴을 만들어보자

이벤트 델리게이션 적용전

1
2
엑셀을 만든다고 가정하고 cell을 2064개 생성후 각각에 cell 에 이벤트를 설정해보자
그리고 생성된 페이지의 메모리의 Event 리스너 메모리 사이즈를 확인해보자

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {margin:0px;}
    #wrapper {height: 100vh;width: 100vw;padding: 30px;box-sizing: border-box;}
    #wrapper div {border: 1px solid black;width: 30px;height: 30px;float: left;}
</style>
<body>
    <div id="wrapper">
        <div id='cell-1'><span>1</span></div>
        <div id='cell-2'><span>2</span></div>
            ...
        <div id='cell-2064'><span>2064</span></div>
    </div>
<script>
for(var i = 1; i < 2065; i++) {
    var cell = document.getElementById("cell-" + i)
    cell.onmouseover = function () {
        this.style.backgroundColor = "#DDDDDD"
    }
    cell.onmouseout = function () {
        this.style.backgroundColor = "#FFFFFF"
    }
    cell.onclick = function () {
        this.style.backgroundColor = "red"
    }
}
</script>
</body>
</html>

Result

이벤트 델리게이션 적용후

1
2
cell에 각각 설정된 이벤트를 지우고 wrapper DIV에 이벤트를 설정해보자 이것이 이벤트 델리게이션 패턴이다.
생성된 페이지의 메모리의 Event 리스터 메모리 사이즈를 확인해보자

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {margin:0px;}
    #wrapper {height: 100vh;width: 100vw;padding: 30px;box-sizing: border-box;}
    #wrapper div {border: 1px solid black;width: 30px;height: 30px;float: left;}
</style>
<body>
    <div id="wrapper">
        <div id='cell-1'><span>1</span></div>
        <div id='cell-2'><span>2</span></div>
        ...
        <div id='cell-2064'><span>2064</span></div>
    </div>
<script>
    var wrapper = document.getElementById("wrapper")

    wrapper.addEventListener("mouseover", function (event) {
        var target = event.target || event.srcElement

        if(target.id && target.id.indexOf("cell") > -1) {
            target.style.backgroundColor = "#DDDDDD"
        }
    })

    wrapper.addEventListener("mouseout", function (event) {
        var target = event.target || event.srcElement

        if(target.id && target.id.indexOf("cell") > -1) {
            target.style.backgroundColor = "#FFFFFF"
        }
    })

    wrapper.addEventListener("click", function (event) {
        var target = event.target || event.srcElement

        if(target.id && target.id.indexOf("cell") > -1) {
            target.style.backgroundColor = "red"
        }
    })
</script>
</body>
</html>

Result

Reference

0%