반응형
<button class="menu-btn" data-value="1">
<img class="icon" src="../images/1.png" alt="">
<span class="btn-albel">어몽 1</span>
</button>
<button class="menu-btn" data-value="2">
<img class="icon" src="../images/2.png" alt="">
<span class="btn-albel">어몽 2</span>
</button>
<button class="menu-btn" data-value="3">
<img class="icon" src="../images/3.png" alt="">
<span class="btn-albel">어몽 3</span>
</button>이벤트 위임이란 button을 누르면 동작해야 할 때 img , span을 누르게되면 동작이 되지않는 상황에서 부모 노드로 위임을 해서 문제를 해결 할 수 있다.
물론 CSS 속성에서 pointer-evnets : none; 을 사용해서 비슷한 효과를 낼 수 있지만. 만약 동적으로 활당받은 노드에 대해서는 css속성을 입히기는 쉽지가 않다.
따라서 현재노드가 menu-btn이 아닌경우 부모 노드의 포인터를 따라올라가는 방법으로 구현 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* .btn-label{
pointer-events: none;
}
.icon{
pointer-events: none;
} */
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="menu">
</div>
<script>
const menu = document.querySelector('.menu');
function clickBtnHandler(e) {
// console.log(e.target.getAttribute('data-value'));
let elem = e.target;
while (!elem.classList.contains('menu-btn')) {
elem = elem.parentNode;
if (elem.nodeName == 'BODY') {
elem = null;
return;
}
}
console.log(elem.dataset.value);
}
menu.addEventListener('click', clickBtnHandler);
window.addEventListener('click', () => {
const htmlStr = ` <button class="menu-btn" data-value="1">
<img class="icon" src="../images/1.png" alt="">
<span class="btn-albel">어몽 1</span>
</button>
<button class="menu-btn" data-value="2">
<img class="icon" src="../images/2.png" alt="">
<span class="btn-albel">어몽 2</span>
</button>
<button class="menu-btn" data-value="3">
<img class="icon" src="../images/3.png" alt="">
<span class="btn-albel">어몽 3</span>
</button>`;
menu.innerHTML = htmlStr;
});
</script>
</body>
</html>let elem = e.target;
while (!elem.classList.contains('menu-btn')) {
elem = elem.parentNode;
if (elem.nodeName == 'BODY') {
elem = null;
return;
}
위처럼 노드 하나식 접근하는 방법
반응형
'개인공부' 카테고리의 다른 글
| CSS : Scroll 사용 (0) | 2021.01.01 |
|---|---|
| javascript 클릭리스너 활용 (0) | 2021.01.01 |
| CSS : 움직임, 클릭리스너 적용 (2) | 2020.12.30 |
| CSS : relative 와 absolute 정복 (0) | 2020.12.28 |
| 의미론적 태그 (0) | 2020.12.21 |
