이벤트 위임 (event delegation)
비슷한 방식으로 여러 요소들을 다뤄야할 때 사용한다. 모든 요소에 이벤트를 달아주는 것이 아니라 공통 조상에 이벤트 핸들러 하나만 할당한다. 그 후 부모요소를 통해 자식 요소에 할당해주면 되는데, 이 방법을 통하면 이벤트를 하나만 할당해도 여러 요소를 한 번에 다룰 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<script>
// 이벤트 위임(Delegation)
// 비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우, 단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용할 수 있음
const parentEl = document.querySelector('.parent');
const childEls = document.querySelectorAll('.child');
// 모든 대상 요소에 이벤트 등록!
childEls.forEach((el)=>{
el.addEventListener('click', event => {
console.log(event.target.textContent); // event.target : 이벤트가 발생한 요소를 뜻함
});
})
// 조상 요소에 이벤트 위임!
parentEl.addEventListener('click', event => {
const childEl = event.target.closest('.child'); // closest: 선택자와 일치하는 가장 가까운 요소를 찾음 (자기 자신도 포함해서), 없으면 null 반환
if (childEl) {
console.log(childEl.textContent);
}
})
</script>
</body>
</html>
커스텀 이벤트 (custom event)
이벤트를 직접 만들어 dispatchEvent를 통해 실행시키는 것을 뜻한다. 이게 사실 사용을 하나 싶어서 찾아봤는데 그래픽 컴포넌트를 만들 때 사용된다고 한다. 어쨌든 쓰니까 만들어 놨겠지라는 생각을 하지만... mdn 문서를 참조하면 좋을 듯 하여 아래에 첨부한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<script>
// 커스텀 이벤트와 디스패치
const child1 = document.querySelector('.child:nth-child(1)');
const child2 = document.querySelector('.child:nth-child(2)');
child1.addEventListener('click', event =>{
// 강제로 이벤트 발생
child2.dispatchEvent(new Event('click'));
child2.dispatchEvent(new Event('wheel'));
child2.dispatchEvent(new Event('keydown'));
});
child2.addEventListener('click', () =>{
console.log('child2 click!');
});
child2.addEventListener('wheel', () =>{
console.log('child2 wheel!');
});
child2.addEventListener('keydown', () =>{
console.log('child2 keydown!');
});
// 강제실행을 이용해서 커스텀 이벤트를 만들 수도 있음
child1.addEventListener('hello-world', event =>{
console.log('내가 만든 커스텀 이벤트');
console.log(event.detail);
});
child2.addEventListener('click', () =>{
child1.dispatchEvent(new Event('hello-world',
// {
// detail : 123
// } 디테일 값을 주려면 CustomEvent을 사용하면 됨
))
});
</script>
</body>
</html>
https://developer.mozilla.org/ko/docs/Web/API/Event
Event - Web API | MDN
Event 인터페이스는 DOM에서 발생하는 이벤트를 나타냅니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/CustomEvent
CustomEvent() - Web API | MDN
CustomEvent() 생성자는 새로운 CustomEvent를 생성합니다.
developer.mozilla.org
'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 이벤트 - Keyboard Event (0) | 2023.04.24 |
|---|---|
| [JavaScript] 이벤트 - Mouse Event (0) | 2023.04.24 |
| [JavaScript] 이벤트 버블링/캡쳐링 (0) | 2023.04.22 |
| [JavaScript] 이벤트(Event, addEventListener) (0) | 2023.04.22 |
| [JavaScript] 동기/비동기 Promise, Async와 await (0) | 2023.04.22 |
