자바스크립트(Document Object Model) 이벤트위임 [1-6]

이정민·2021년 4월 16일
0
<style>
.menu-active{
 background: orange;
 }
 <style>
 
 
<nav class="menu">
	<a href="#" class="menu-link">menu 1</a>
    <a href="#" class="menu-link">menu 2</a>
    <a href="#" class="menu-link">menu 3</a>
</nav>

<script>
var removeMenu;
var menuLinks = document.querySelectorAll('.menu-link');

function clickMenuHandler(){
 if(removeMenu){
  removeMenu.classList.remove('menu-active');
  }
  this.classList.add('menu-active');
  removeMenu = this;
  }
  
  for (var i = 0; i<menuLinks.length; i++){
   menuLinks[i].addEventListener('click', clickMenuHandler)
 </script>

3개의 메뉴중에 하나를 선택했을 때 색깔을 바꿀려고 한다.

함수 clickMenuHandler를 만들고 classList.add와 remove를 통해
선택됬을때 색깔을 입히고 다른 것을 선택했을 때 색깔이 지워지게 만든다.
removeMenu전역변수를 이용해서 처음 눌러서 색깔이 변한 menuLinks들 중 1개를
removeMenu = this; 를 통해서 저장해둔다. 이후 if문을 통해 활성화 됬을때만
지울수 있게 한다.
-(여기서 this는 menuLinks[i]중에서 클릭된 것을 가리킨다.)

<style>
.menu-active{
 background: orange;
 }
 <style>
 
 
<nav class="menu">
	<a href="#" class="menu-link">menu 1</a>
    <a href="#" class="menu-link">menu 2</a>
    <a href="#" class="menu-link">menu 3</a>
</nav>

<script>
var removeMenu;
var menuLinks = document.querySelector('.menu');

function clickMenuHandler(e){
 if(removeMenu){
  removeMenu.classList.remove('menu-active');
  }
  e.target.classList.add('menu-active');
  removeMenu = e.target;
  }
  
  menu.addEventListener('click', clickHandler);
  </script>

이벤트 위임을 통하여 a의 부모태그인 nav의 선택자 menu를 이용한다.
위의 코드와 비슷하지만 e.target을 이용하여 현재 마우스가
클릭하는 위치를 받아 색깔을 바꿔준다.

장점은 어떤영역에 이벤트위임을 해줬을 시 그 안에서 새로 만들어지는
것들에도 적용이 가능해진다.

사이트를 느려지게 만들 수 있는 addEventListener 사용을 제한 할 수 있다.

(1분 코딩으로 공부중!! 아주 유익한 정보였다)

profile
안녕하세요.

0개의 댓글