[JavaScript] 이벤트 위임(Event delegation)

이벤트 위임이란?

우리가 DOM에서 특정한 이벤트를 바탕으로 원하는 동작을 실행시키기 위해서는 각 Element 마다 EventListener를 달아주어야 한다.

다만, 비슷한 구조가 연속적으로 존재하는 경우 모든 Element마다 EventListener를 달아주는 것을 번거롭기도 하고, 코드의 가독성을 떨어뜨린다. 게다가 리스너를 여러개 달아주어야하기 때문에 메모리 사용량에도 좋지 않은 영향을 미친다.

이를 해결하기 위해서 `이벤트 위임`을 사용할 수 있다.

`이벤트 위임` 이란, DOM 이벤트 처리를 개선하고 성능을 향상시키는 방법 중 하나로, 상위 요소에 이벤트 리스너를 하나 달아 준 후 해당 이벤트의 타겟 요소를 확인하여 필요한 동작을 수행하는 방식이다.

사용 예시를 살펴보자

간단하게 버튼을 누르면 항목이 추가되고, 추가된 항목을 누르면 사용자가 텍스트를 입력할 수 있는 프로그램을 구현하려고 한다.

이벤트 위임을 사용하지 않고 구현하면 아래와 같다.

<!DOCTYPE html>
<html>
<head>
    <title>이벤트 위임을 사용하지 않은 것</title>
</head>
<body>
    <button id="addButton">새 항목 추가</button>
    <ul id="myList">
    </ul>

    <script>
        const addButton = document.getElementById('addButton');
        const myList = document.getElementById('myList');

        // 버튼 클릭 시 새로운 목록 항목을 추가
        addButton.addEventListener('click', function () {
            const newItem = document.createElement('li');
            newItem.addEventListner('click', function(){
            	const newText = prompt('새로운 텍스트를 입력하세요:', '새 항목');
                newItem.textContent = newText;
            })
            newItem.textContent = '새 항목';
            myList.appendChild(newItem);
        });
    </script>
</body>
</html>

버튼을 클릭하여 newItem을 생성하는데, 생성할 때 마다 따로 Listener를 달아주는 것을 확인할 수 있다.

이렇게 하면 newItem을 1000개 만들면 이벤트 리스너를 1000개 달아주어야 하는 대 참사가 발생한다.

이는 아래와 같이, 이벤트 위임을 사용하여 해결할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>이벤트 위임 예제</title>
</head>
<body>
    <button id="addButton">새 항목 추가</button>
    <ul id="myList">
    </ul>

    <script>
        const addButton = document.getElementById('addButton');
        const myList = document.getElementById('myList');

        // 버튼 클릭 시 새로운 목록 항목을 추가
        addButton.addEventListener('click', function () {
            const newItem = document.createElement('li');
            newItem.textContent = '새 항목';
            myList.appendChild(newItem);
        });

        // 목록의 클릭 이벤트 위임
        myList.addEventListener('click', function (event) {
            if (event.target.tagName === 'LI') {
                // 클릭한 항목의 텍스트를 변경
                const newText = prompt('새로운 텍스트를 입력하세요:', '새 항목');
                if (newText) {
                    event.target.textContent = newText;
                }
            }
        });
    </script>
</body>
</html>

위 예제를 살펴보면 newItem에 개별적으로 달아주던 이벤트 리스너를

myList에 달아주는 하나의 이벤트 리스너로 대체하고, 타겟의 tagName을 식별하여 동작하는 것을 확인할 수 있다.

이렇게, 이벤트 위임을 사용하면 코드의 가독성을 높이고, 메모리 공간을 절약할 수 있다는 큰 장점이 있다.

이벤트 위임이란?

티스토리툴바