[Javascript] 이벤트 위임, 이벤트 리스너

JAVA SCRIPT

[Javascript] 이벤트 위임, 이벤트 리스너

혀누쓰0 2022. 6. 9. 17:18

이벤트 위임으로 탭메뉴 만들기

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() 이벤트 리스너