[책] 자바스크립트 코드 레시피 278 - 99일차

이벤트 추가하기

• 이벤트의 함수 지정하고 싶을 때

구문

이벤트타깃.addEventListener(이벤트명, 리스너, [옵션])

설명

addEventListener() 를 사용해 이벤트의 함수를 지정할 수 있습니다. 이벤트 발생 시 실행하는 이벤트의 함수는 다음과 같이 다양한 방법으로 기술이 가능합니다.

실습

window.onload = () => {
  const button = document.querySelector('.button');

  // 화살표 함수
  button.addEventListener('click', () => {
    console.log('화살표 함수로 작성하였습니다.');
  });

  // function 함수
  button.addEventListener('click', function() {
    console.log('function 함수로 작성하였습니다.');
  });

  // 함수명 지정하기
  button.addEventListener('click', onClickButton);
  function onClickButton() {
    console.log('함수명 지정하기로 작성하였습니다.');
  }
}

화살표 함수는 this 를 고정할 수 있다는 장점을 가졌습니다. 이 책의 샘플은 주로 화살표 함수를 사용하여 이벤트 리스너를 구현합니다.