<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분 코딩으로 공부중!! 아주 유익한 정보였다)