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

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

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

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

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

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

let 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">

다음은 주어진 함수들입니다:

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

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

첫 번째 버튼을 클릭했을 때 함수 func1가 실행되고, 두 번째 버튼을 클릭했을 때 함수 func2가 실행되도록 만드세요.