ตัวจัดการเหตุการณ์ที่มีชื่อใน 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 ทำงาน