Gắn trình xử lý sự kiện vào các phần tử trong JavaScript

Bây giờ hãy học cách làm cho các phần tử DOM của chúng ta phản ứng với hành động của người dùng trên trang web. Ví dụ, người dùng nhấp chuột vào đâu đó, và mã của chúng ta đáp lại sẽ phải xử lý lần nhấp đó và hiển thị một số thông tin ra màn hình.

Các hành động của người dười mà chúng ta có thể theo dõi thông qua JavaScript được gọi là sự kiện. Các sự kiện có thể như sau: nhấp chuột vào một phần tử trang, di chuột vào một phần tử trang hoặc ngược lại - con trỏ chuột rời khỏi phần tử và vân vân. Ngoài ra, có những sự kiện không phụ thuộc vào hành động của người dùng, ví dụ, sự kiện khi trang HTML được tải lên trình duyệt.

Làm ví dụ, hãy tạo một nút bấm, khi nhấp vào nó sẽ hiển thị một đoạn văn bản nào đó ra màn hình. Đầu tiên hãy tạo mã HTML cho nút:

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

Bây giờ hãy lấy tham chiếu đến nút vào một biến:

let button = document.querySelector('#button');

Bây giờ chúng ta cần thiết lập phản ứng cho nút bấm của chúng ta khi nhấp vào nó. Trong JavaScript có một phương thức đặc biệt addEventListener, tham số đầu tiên nhận tên sự kiện (nhấp vào nút có tên là 'click'), và tham số thứ hai - hàm callback, được thực thi khi sự kiện đó xảy ra.

Ví dụ, hãy hiển thị một đoạn văn bản nào đó khi nhấp vào nút:

button.addEventListener('click', function() {
	console.log('!!!');
});

Cho 3 nút bấm:

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

Hãy làm sao để khi nhấp vào nút đầu tiên số 1 được hiển thị ra màn hình, khi nhấp vào nút thứ hai - số 2, và khi nhấp vào nút thứ ba - số 3.