Javascript 1분코딩 (ft.최소 자바스크립트 유목민..그래도 진짜 마지막)

https://www.youtube.com/watch?v=Y3_2BLb3hz8

자바스크립트 기초 Part 3: 이벤트

1. 이벤트(Event)

• 브라우저에서 일어나는 동적인 움직임(ex.클릭, 터치, tap, swipe, load, resize)
• 해당 내용에서는 click event를 다룰 예정
  
  

1.1 addEventListner/addEventHandler

• 버튼 추가해서 버튼 클릭하면 제목 색상 바뀌는 효과주기

<h1 id="main-title">Event</h1> 
<button class="btn">클릭하세요</button>

var btn=document.querySelector('.btn');
var mainTitle=document.querySelector('#main-title');

funtion btnClickHandler(){
mainTitle.style.background= 'dodgerblue';
}

btn.addEventListner('click', btnClickHandler);

• 리스트에서 hover했을때마다 색상변하는 효과 주기

.menu-link {
background : dodgerblue;
color : #fff;

.menu-active {
background : orange;
}

<nav class="menu">
  <a href="#" class="menu-link" data-menu="1">menu 1</a>
  <a href="#" class="menu-link" data-menu="2">menu 2</a>
  <a href="#" class="menu-link" data-menu="3">menu 3</a>
</nav>

var menuLinks=document.querySelectorAll('.menu-link'); 
function clickMenuHandler () {
this.classList.add('menu-active');//this를 통해 클릭한 부분만 색 변경 가능
}
for (var i=0; i<menuLinks.length; i++) {
  menuLinks[i].addEventListner('click', clickMenuHandler);
}

• 변한 색상에서 다시 원래색으로 돌아가는 event 추가하기

var menuLinks = document.querySelectorAll('.menu-link'); 

function clickMenuHandler () {
 for (var i = 0; i < menuLinks.length; i++) {
   menuLinks[i],classList.remove('menu-active');}
  
this.classList.add('menu-active'); //jquery style 
}

for (var i=0; i<menuLinks.length; i++) {
  menuLinks[i].addEventListner('click', clickMenuHandler);
} // 더 간단하게 해보자면 

function clickMenuHandler() {
  var activeMenu = docuemnt.querySelector('.menu-active');
  if (activeMenu) {
    activeMenu.classList.remove('menu-active');
  }
  this.classList.add('menu-active');
    
  for (var i=0; i<menuLinks.length; i++) {
  menuLinks[i].addEventListner('click', clickMenuHandler);
}