Trình xử lý sự kiện có tên trong JavaScript

Trong các bài học trước, chúng ta đã sử dụng hàm ẩn danh làm trình xử lý sự kiện. Trên thực tế điều này là không bắt buộc - hàm cũng có thể là hàm thông thường, có tên. Ví dụ, giả sử chúng ta có hàm như sau:

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

Giả sử cũng có một nút bấm:

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

Hãy làm sao để khi nhấp vào nút hàm func của chúng ta được thực thi. Để làm điều này, chúng ta sẽ truyền tên hàm của chúng ta làm tham số cho addEventListener, như thế này:

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

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

Cho trước mã HTML sau:

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

Cho trước các hàm sau:

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

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

Hãy làm sao để khi nhấp vào nút thứ nhất hàm func1 được thực thi, còn khi nhấp vào nút thứ hai - hàm func2.