고정 헤더 영역
상세 컨텐츠
본문
이벤트 위임으로 탭메뉴 만들기
https://hyunu0504.github.io/blog6/#
https://hyunu0504.github.io/blog6/
hyunu0504.github.io
이벤트 위임이란 부모 요소에만 이벤트를 등록해서
자신에게 발생한 이벤트를 다른 요소에서 처리하는것이다
결국 이벤트 버블링을 이용해서 이벤트 위임을 할 수 있다.
원래는 요소 하나하나에 이벤트를 달아줬다면 이벤트 위임을 사용하면
부모요소에만 이벤트를 달아주면 된다.
이벤트를 남용하면 사이트 성능에도 영향이 있고, 유지보수에도 안좋기 때문에
이벤트 위임을 사용하면 좋다.
HTML
<html>
<haed>
<link rel="styleSheet" href="./style.css" />
</haed>
<body>
<ul class="container">
<li class="a"><a href="#">링크</a>1</li>
<li class="a"><a href="#">링크</a>2</li>
<li class="a"><a href="#">링크</a>3</li>
<li class="a"><a href="#">링크</a>4</li>
</ul>
</body>
<script src="./a.js"></script>
</html>CSS
body {
margin: 0;
}
ul {
display: flex;
list-style: none;
justify-content: space-around;
background-color: powderblue;
height: 500px;
}
li {
text-align: center;
background-color: grey;
height: 300px;
width: 300px;
}
a {
font-size: 48px;
}
.on {
background-color: black;
}
Javascript
이벤트 위임하기 전에는 하드코딩식이였다면
document.querySelectorAll('.item')[0].addEventListener('click', addColor)
document.querySelectorAll('.item')[1].addEventListener('click', addColor)
document.querySelectorAll('.item')[2].addEventListener('click', addColor)
document.querySelectorAll('.item')[3].addEventListener('click', addColor)
이벤트 위임을 사용하면 부모한테만 이벤트를 하나만 달아주면 된다.
const box = document.querySelector('.container');
box.addEventListener('click', addColor2);
const box = document.querySelector('.container');
function addColor(e){
console.log(e.target) // 실제 클릭한 요소
console.log(e.currentTarget) // 이벤트가 등록된 요소
let click = e.target; // 실제 클릭한 요소를 click이라는 변수에 담음
if( click.tagName == "A" ){ // 클릭한 요소의 tag네임이 a태그라면
click = click.parentElement //클릭한 요소를 그 요소의 부모요소로 선택
}
else if( click == e.currentTarget ){ //클릭한 요소가 이벤트가 등록된 요소면
return; // 리턴함
}
for( c of box.children ){ //box안의 자식들을 c인자로 받음
c.classList.remove('on') //그 요소의 on이라는 클래스를 제거
}
click.classList.add('on') //클릭한 요소에 on 클래스 추가
}
box.addEventListener('click', addColor)
콘솔창에 찍어보면 e.target은 실제 클릭한 요소값이 나오고
e.currentTarget은 이벤트가 등록된 요소 즉 부모가 나온다. 최상위 부모를 뜻 한다.
문제점으로는 부모를 클릭해도 이벤트가 실행되고, 자식을 선택하면 자식만 이벤트가 실행된다.
위에서는 자식으로 a태그가 있다
if( click.tagName == "A" ){ // 클릭한 요소의 tag네임이 a태그라면
click = click.parentElement //클릭한 요소를 그 요소의 부모요소로 선택
}
a태그가 선택됐다면 그 요소의 부모를 선택하게 하고
else if( click == e.currentTarget ){ //클릭한 요소가 이벤트가 등록된 요소면
return; // 리턴함
}
또 e.currentTarget 여기서 e.currentTarget은 최상위 부모를 뜻한다고 했다 그것은 container ul이다
부모에는 이벤트를 실행하지 않을거라서 return 해준다.
addEventListner() 이벤트 리스너
'JAVA SCRIPT' 카테고리의 다른 글
| [Javascript] function 메소드 ( call, apply, bind ) (0) | 2022.06.14 |
|---|---|
| [Javascript] window 메소드 ( setTimeout, setInterval, clearInterval, clearTimeout ) (0) | 2022.06.12 |
| [Javascript] 이벤트 버블링, 캡쳐링, stopPropagation, preventDefault (0) | 2022.06.09 |
| [Javascript] 눈 내리는 효과 만들기 (0) | 2022.06.08 |
| [Javascript] Math 객체 메소드( random, min, max, abs, sqrt, pow) (0) | 2022.06.07 |
