<자바스크립트 기초> 12. 이벤트 (1)

* 이벤트란

 - 이벤트란 정적인 상태의 웹에서 특정한 동작을 시행하는 것을 의미한다.

 

 - 예를 들어 웹문서가 로드가 다 되었을 때, 창 크기가 바뀔 때, 마우스가 클릭되었을 때, 마우스 휠이 움직일 때, 화면에 터치가 이루어 졌을 때 등등이 있다.

 

 - 우리는 이러한 이벤트에 반응하여 동작을 시행하는 함수를 만들 것이다.

 

* 이벤트 함수

// <button class="btn">클릭</button>
//<script>
    var btn = document.querySelector('.btn');
    var mainTitle = document.querySelector('#main-title')
    function btnClickHandler () {
        mainTitle.style.background = 'dodgerblue';
    }

    btn.addEventListener('click', btnClickHandler);
//</script>

 - 먼저 간단하게 버튼을 만들었다. 우리의 목표는 버튼을 클릭하였을 때 main-title이라는 id를 가진 h1태그의 배경색을 바꾸는 것이다.

 

 - btn이라는 변수에 클래스명을 이용하여 버튼을 담아주었다.

 

 - 다음으로 변경이 이루어지는 h1태그도 id를 이용하여 mainTitle 변수에 담아주었다.

 

 - 이제 클릭되었을 때 시행될 함수를 만들어야한다. 이 때 함수명에 Handler또는 Listener을 붙인다. 그 이유는 이벤트 발생 함수를 리스너 혹은 핸들러라고 부르기 때문에 관행적으로 그것을 표현해주는 것이다. 그리고 여기서 스타일 조정을 위해 스타일 객체를 이용한다.

 

 - 이제 이 함수를 원하는 변수에서 시행하도록 하면된다. 이 때 사용하는 것이 addEventListener() 메소드이다. 첫번째 매개변수로 'click'이라는 이벤트명을 주면 클릭 시라는 의미이다. 두 번째 매개변수로 원하는 함수명을 작성하면 된다. 

 

 - 참고로 변수.onclick = 함수명 을 통해서 같은 결과를 보여줄 수 있으나, 이는 속성 값이기 때문에 하나만 가능하다는 단점이 있다. 즉 여러개를 작성하면 마지막 것만 실행되는 것이다.

 

 

* 변수의 활용

 - 이번에는 세 개의 메뉴가 있다고 가정하자. 이 때 메뉴를 클릭하면 위와 같이 색이 변경된다고 하자. 

 

 - 먼저 우리는 좀 더 간단하게 변경된 색을 가진 클래스를 스타일로 선언하였다고 하자. 이 클래스의 이름은 'menu-active' 이고 각각의 메뉴는 현재 'menu-link'라는 클래스만 가지고 있다.

 

 - 이제 이를 클릭시 변경시키려면 클릭했을때 'menu-active'라는 클래스를 추가시키기만 하면 된다.

 

 - 여기까지는 아까 봤었던 것과 거의 동일하다. 그러나 여기서 문제가 발생한다. 하나의 메뉴를 클릭하고 다른 메뉴를 클릭하면 앞서 클릭했던 메뉴의 색이 돌아오지 않는다는 것이다. 우리는 클릭한 것만 색이 변경되었으면 좋겠는데 말이다.

 

 - 즉 우리는 다른 메뉴를 클릭할 때마다 앞서 클릭했던 메뉴의 'menu-acive'클래스를 지워야한다.

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

function clickMenuHandler() {
    if (currentMenu) {
        currentMenu.classList.remove('menu-active');

    }
    this.classList.add('menu-active');
    currentMenu = this;
}

for (var i = 0; i < menuLinks.length; i++) {
    menuLinks[i].addEventListener('click', clickMenuHandler);
}

 - 먼저 변수로 currentMenu를 선언하였다. 이는 앞서 클릭했던 것을 저장하기 위해 만든 변수이다.

 

 - 그다음 변수는 메뉴들을 전부 객체로 담아 menuLinks 로 선언하였다.

 

 - for구문을 확인하면 이 menuLinks안의 각각의 메뉴들에 전부 click시 함수를 시행하도록 했음을 알 수 있다.

 

 - 이제 함수를 만들어보자. if문을 통해 currentMenu에 값이 있으면 menu-active라는 클래스를 먼저 제거토록하였다.

 

 - 다음으로 클릭된 메뉴에 menu-active를 추가해야하는데 클릭된 메뉴를 어떻게 받을 수 있을까. 바로 this이다. this는 정확하게는 리스너를 부른 객체를 의미한다. 여기서는 menuLinks의 i번째 인덱스가 되므로 클릭된 메뉴를 의미한다.

 

 - 그리고 currentMenu에 지금 클릭된 객체를 저장해주면 다음에 다른 것을 클릭했을 경우 정상적으로 menu-active 클래스가 제거될 것이다.

 

 

 

 

---

 

 

 

 

참고

 

 

이 글은 1분코딩의 자바스크립트 기본 강의를 유튜브에서 수강하고 개인적으로 정리하며 작성한 글입니다.

 

 

 

 

1분코딩

1분코딩