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