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

📃 이어지는 글

이벤트 플로우(Event Flow)
이벤트 버블링(Event Bubbling) + e.stopPropagation()
이벤트 캡쳐링(Event Capturing)
이벤트 위임(Event delegation )← Now !

🤔 이벤트 위임이란?

하위 요소에 각각 이벤트를 붙이지 않고, 상위요소에서 하위 요소의 이벤트를 컨트롤 하는 방식

컨테이너에 (아래 예시에서는 ul) 하나의 핸들러를 할당함
핸들러의 e.target 을 사용해서 이벤트가 발생한 요소가 어디인지 알아냄
원하는 요소에서 이벤트가 발생한 것이 확인되면 이벤트를 핸들링함 (아래 예시에서는 tagName으로 확인함)

<body>
    <ul>
        <li>li 1</li>
        <li>li 2</li>
        <li>li 3</li>
    </ul>
</body>

const ul = document.querySelector("ul");
ul.addEventListener("click", function (e) {
	const targetli = e.target;
	if (targetli.tagName != "LI") return; // li에서 발생한 것이 아니라면 끝냄
	console.log("li clicked ul event..." + targetli.innerHTML);
});

ul에 click 이벤트를 줬는데 li를 누르면 동일한 이벤트가 발생함

→ li가 1000개 정도 있을 때, 하나하나 이벤트를 다 달아주지 않아도 된다는 뜻!

이벤트 위임의 장점

많은 핸들러를 할당하지 않아도 되므로 초기화가 단순해지고, 메모리가 절약됨
요소를 추가할 때 마다 핸들러도 같이 추가하지 않아도 되므로 코드가 간결해짐
innerHTML이나 유사한 기능을 하는 스크립트로 요소 덩어리를 추가하거나 뺄 수 있기 때문에 DOM 수정이 쉬워짐

이벤트 위임의 단점

이벤트가 꼭 버블링 되어야 실행됨 (근데 몇몇 이벤트에는 버블링이 지원되지 않는게 있어서..)
CPU 작업 부하가 생길 수 있다(고는 하지만 실제로 큰 영향은 없다고 한다)

👀 참고

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.

joshua1988.github.io

https://racoonlotty.tistory.com/entry/javascript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84

[javascript] 이벤트 위임

캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation) 을 구현할 수 있습니다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용됩니다. 이벤트 위

racoonlotty.tistory.com

https://ko.javascript.info/event-delegation

'🍒공부 > JS' 카테고리의 다른 글

[JavaScript] window.requestAnimationFrame() (0)	2021.10.07
[JavaScript] Babel (0)	2021.09.25
[JavaScript] 이벤트 캡쳐링(Event Capturing) (0)	2021.09.23
[JavaScript] 이벤트 버블링(Event Bubbling) + e.stopPropagation() (0)	2021.09.17
[JavaScript] 이벤트 플로우(Event Flow) (0)	2021.09.16

rinrin-dev

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

📃 이어지는 글

🤔 이벤트 위임이란?

👀 참고

'🍒공부 > JS' 카테고리의 다른 글

댓글

티스토리툴바

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

📃 이어지는 글

🤔 이벤트 위임이란?

👀 참고

'🍒공부 > JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바