JavaScript에서 이름 지정 이벤트 핸들러

이전 강의에서 우리는 이벤트 핸들러로 익명 함수를 사용했습니다. 사실 이것은 필수 사항이 아닙니다. - 함수는 일반 함수일 수도 있고, 이름을 가질 수도 있습니다. 예를 들어 다음과 같은 함수가 있다고 가정해 보겠습니다:

javascriptfunction func() {
  console.log('!!!');
}

또한 버튼이 있다고 가정해 보겠습니다:

html<input id="button" type="submit">

버튼을 클릭했을 때 우리의 함수 func가 실행되도록 만들어 봅시다. 이를 위해 addEventListener의 매개변수로 우리 함수의 이름을 다음과 같이 전달합니다:

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

html<input id="button1" type="submit" value="button1">
<input id="button2" type="submit" value="button2">

javascriptfunction func1() {
  console.log(1);
}

function func2() {
  console.log(2);
}