https://ko.javascript.info/event-delegation
이벤트 위임
ko.javascript.info
이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다.
공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다.
이벤트 위임의 장점
1. 동적인 엘리먼트에 대한 이벤트 처리가 수월하다.
2. 이벤트 핸들러 관리가 쉽다.
3. 메모리 사용량이 줄어든다. (가장 큰 장점)
4. 메모리 누수 가능성이 줄어든다.
부모 컨테이너(div) 안에 버튼(button) 5개가 있다고 가정한다면,
버블링
div에 클릭 이벤트 리스너를 등록/ button에도 클릭 이벤트 리스너를 등록해 놓으면
button 클릭시, button에 등록된 클릭 이벤트 콜백함수가 실행 되고, div에도 등록된 클릭 이벤트 콜백 함수가 실행된다.
div에 클릭이 발생한게 아님에도 div에 등록된 콜백함수가 실행되는 것은
자식 요소에게 이벤트가 발생하면 부모에게 동일한 이벤트를 위해 등록된 콜백함수도 실행된다.
이것이 버블링! 이벤트가 위쪽 (부모쪽)으로 올라간다.
이벤트 위임
이제 이 버블링을 이용해서 이벤트 위임을 구현하자.
button 5개 모두에게 클릭 이벤트 리스너를 등록하지 않아도, 부모 요소 div에만 클릭 이벤트 리스너를 등록 해놓으면 그 안의 버튼들이 클릭이 되어지면 부모요소에 등록된 클릭 이벤트가 발생된다.
여기서 문제는 버튼을 클릭해도, 또는 div안의 여백의 공간을 클릭해도 등록된 클릭 이벤트 콜백 함수가 계속 실행된다.
버튼이 클릭되어지면 자식 요소가 클릭이 되었으니 버블링을 통해 div에 등록된 콜백 함수가 실행되고 div안의 여백이 클릭되면 div 자체가 클릭이 되었으니 콜백 함수가 실행되어지고.
여기서 버튼이 클릭 되었을때만 이벤트를 처리 하고 싶다면?
event.target을 이용해서 현재 클릭된 요소가 버튼일때만 처리해주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
// Bad!
// const lis = document.querySelectorAll('li');
// lis.forEach(li => {
// li.addEventListener('click', () => {
// li.classList.add('selected');
// });
// });
// Good! 부모객체에 이벤트 리스너를 추가하는 것이 좋음
const ul = document.querySelector('ul');
ul.addEventListener('click', event => {
if (event.target.tagName == 'LI') { // 체크포인트
event.target.classList.add('selected');
}
});
</script>
</body>
</html>체크포인트 :
.tagName은 항상 대문자로 값을 반환하기 때문에 li 소문자는 사용 안됨.
== 비교는 대소문자도 비교하기 때문에 LI와 li는 같지 않음.
(아주 오래전에 태그들은 대문자를 썼기 때문에 예전 버전과 호환이 가능하기 위해서 tagName을 대문자로 반환해 주었는데, 현재 대문자를 더이상 사용하지 않음에도 불구하고, 예전 관습이 남아 있는것.)
'Front-end > Javascript' 카테고리의 다른 글
| MVC 패턴(화면 개발에 많이 쓰이는 패턴) (0) | 2022.03.27 |
|---|---|
| web APIs (Application Programming Interfaces) (0) | 2022.03.11 |
| 문서 객체 모델 (DOM) (0) | 2022.03.09 |
| 자주 사용하는 메소드 (0) | 2022.03.08 |
| 객체 (0) | 2022.03.07 |