오늘은 자바스크립트에서의 이벤트 핸들링에 대해서 공부를 했습니다.
브라우저가 이벤트를 감지하는 방법에는 이벤트 버블링, 이벤트 캡쳐로 2가지가 있습니다.
이벤트 버블링
임의의 요소에서 이벤트가 발생했을 때 현재 요소에서 상위 요소로 이벤트가 위로 전파되는 특성입니다.
이벤트 캡쳐
이벤트 버블링과는 정반대로 상위 요소에서 이벤트가 발생했다면 하위 요소로 전파되는 특성입니다.
이벤트 위임
해당 내용을 수월하게 이해하려면 이전에 필요한 내용이 이벤트 버블링, 이벤트 캡쳐입니다.
이벤트 위임의 개념은 "상위 요소에서 하위 요소의 이벤트를 제어하는 방식"입니다.
<HTML>
<!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">
<script type="module" src="event_delegation.js"></script>
<title>Event Delegation</title>
</head>
<body>
<ul class="btn-list">
<button data-action="save">save</button>
<button data-action="load">load</button>
<button data-action="search">search</button>
</ul>
</body>
</html>
<Javascript>
class ButtonList {
element;
constructor(element) {
this.element = element;
// 아래의 click 이벤트는 특정 요소의 기능만 수행가능하도록 만들어진
// 이벤트 핸들러입니다.
this.element.addEventListener("click", (e) => this.onClick(e));
}
save() {
console.log("저장하기");
}
load() {
console.log("불러오기");
}
search() {
console.log("검색하기");
}
onClick(e) {
let action = e.target.dataset.action;
if (action) {
this[action]();
}
}
}
const btnList = document.querySelector(".btn-list");
new ButtonList(btnList);
위의 예제는 하위에 버튼 여러개를 포함하고 있는 ul 태그에 대해서 이벤트를 관리하는 방법을 설명하고 있습니다.
이벤트를 관리하는 방법 중에는 1) 각각에 요소에 이벤트를 추가하고 관리하는 방법도 있겠지만 2) 각각의 요소를 포함하는 상위 요소에 이벤트를 추가해서 관리하는 방법이 더 효율적입니다.
2번째 방법을 사용하면 동적으로 요소를 추가해도 문제없이 이벤트가 동작하도록 만들 수 있습니다.
참고
https://ko.javascript.info/event-delegation
이벤트 위임
ko.javascript.info
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지
(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.
joshua1988.github.io
'취업 > 기록' 카테고리의 다른 글
| D - Day 93 - 2 (자바스크립트 async, await 문법) (0) | 2021.06.15 |
|---|---|
| D - Day 93 - 1 (함수에 대한 기본) (0) | 2021.06.15 |
| D - Day 95 (Javascript Promise) (0) | 2021.06.13 |
| D - Day 97 (자바스크립트 Callback Function) (0) | 2021.06.11 |
| D - Day 100 (0) | 2021.06.08 |