JavaScript - addEventListener(): Cổng vào các Trang Web Tương Tác

Xin chào các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ cùng tìm hiểu một trong những công cụ mạnh mẽ nhất trong bộ công cụ phát triển web của bạn: phương thức addEventListener(). Cuối cùng của bài hướng dẫn này, bạn sẽ có thể làm cho các trang web của mình nhảy theo điệu nhạc của bạn!

JavaScript - addEventListener()

addEventListener() là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu thêm về addEventListener() thực sự làm gì. Hãy tưởng tượng bạn đang ở một buổi tiệc (một trang web) và bạn muốn biết khi ai đó (người dùng) làm một hành động cụ thể, như bấm chuông (nhấp vào một nút). Phương thức addEventListener() giống như người quản gia trung thành của bạn đứng bên cửa, chờ đợi tiếng chuông, và sau đó báo cho bạn để bạn có thể hành động.

Trong thuật ngữ JavaScript, addEventListener() cho phép bạn lắng nghe các sự kiện cụ thể trên các phần tử HTML và phản hồi chúng với các chức năng tùy chỉnh.

Cú pháp

Hãy cùng nhìn vào cú pháp cơ bản:

element.addEventListener(event, function, useCapture);

Dưới đây là ý nghĩa của từng phần:

element: Phần tử HTML bạn muốn gắn sự kiện vào.
event: Một chuỗi xác định loại sự kiện cần lắng nghe (ví dụ: "click", "mouseover").
function: Hàm sẽ được thực thi khi sự kiện xảy ra.
useCapture: Một tham số boolean tùy chọn (chúng ta sẽ đề cập đến sau này).

Bây giờ, hãy nhìn nó trong hành động!

Ví dụ

1. Nút Nhấp Cổ Điển

Hãy bắt đầu với ví dụ phổ biến nhất: phản hồi khi nhấp vào nút.

HTML:

<button id="myButton">Nhấp vào tôi!</button>

JavaScript:

// Đầu tiên, chúng ta lấy tham chiếu đến nút của mình
const button = document.getElementById("myButton");

// Bây giờ, chúng ta thêm một người nghe sự kiện cho sự kiện 'click'
button.addEventListener("click", function() {
alert("Nút đã được nhấp!");
});

Trong ví dụ này, chúng ta đang yêu cầu JavaScript lắng nghe sự kiện 'click' trên nút của chúng ta. Khi điều đó xảy ra, nó sẽ hiển thị một thông báo. Đơn giản phải không?

2. Thay Đổi Màu sắc Khi Hover

Hãy làm cho mọi thứ thú vị hơn một chút. Chúng ta sẽ thay đổi phong cách của một phần tử khi con trỏ chuột di chuột qua nó.

HTML:

<div id="colorBox" style="width: 100px; height: 100px; background-color: blue;">
Di chuột qua tôi!
</div>

JavaScript:

const box = document.getElementById("colorBox");

box.addEventListener("mouseover", function() {
this.style.backgroundColor = "red";
});

box.addEventListener("mouseout", function() {
this.style.backgroundColor = "blue";
});

Ở đây, chúng ta sử dụng hai người nghe sự kiện: một cho 'mouseover' (khi con trỏ chuột vào phần tử) và một cho 'mouseout' (khi con trỏ chuột rời khỏi). Chú ý rằng chúng ta sử dụng this để tham chiếu đến phần tử mà sự kiện được gắn vào.

3. Xác Thực Form

Bây giờ, hãy thử một điều gì đó thực tế hơn: xác thực form cơ bản.

HTML:

<form id="myForm">
<input type="text" id="nameInput" placeholder="Nhập tên của bạn">
<button type="submit">Gửi</button>
</form>

JavaScript:

const form = document.getElementById("myForm");
const nameInput = document.getElementById("nameInput");

form.addEventListener("submit", function(event) {
if (nameInput.value.trim() === "") {
event.preventDefault(); // Ngăn chặn form từ việc gửi đi
alert("Vui lòng nhập tên của bạn!");
}
});

Chuỗi mã này lắng nghe sự kiện 'submit' trên form. Nếu ô nhập tên trống, nó ngăn chặn form gửi đi và hiển thị một thông báo. Chú ý tham số event trong hàm - điều này cho phép chúng ta truy cập vào đối tượng sự kiện, có các phương thức như preventDefault().

4. Sự Kiện Bàn Phím

Hãy khám phá sự kiện bàn phím bằng cách tạo một trò chơi đơn giản nơi bạn phải nhấn phím đúng.

HTML:

<div id="gameArea">
Nhấn phím đúng!
<p id="targetKey"></p>
<p id="message"></p>
</div>

JavaScript:

const targetKey = document.getElementById("targetKey");
const message = document.getElementById("message");
let currentKey = "";

function setNewTarget() {
currentKey = String.fromCharCode(65 + Math.floor(Math.random() * 26));
targetKey.textContent = `Phím mục tiêu: ${currentKey}`;
}

document.addEventListener("keydown", function(event) {
if (event.key.toUpperCase() === currentKey) {
message.textContent = "Đúng rồi! Tốt lắm!";
setNewTarget();
} else {
message.textContent = "Ồ! Hãy thử lại!";
}
});

setNewTarget(); // Bắt đầu trò chơi

Chuỗi mã này đặt một phím mục tiêu ngẫu nhiên và lắng nghe sự kiện 'keydown' trên toàn bộ tài liệu. Nó sau đó kiểm tra xem phím nhấn có khớp với phím mục tiêu hay không.

Loại Sự Kiện

Có nhiều loại sự kiện bạn có thể lắng nghe. Dưới đây là bảng một số loại phổ biến:

Loại Sự Kiện	Mô Tả
click	Khi một phần tử được nhấp
mouseover	Khi con trỏ chuột vào phần tử
mouseout	Khi con trỏ chuột rời khỏi phần tử
keydown	Khi một phím được nhấn
keyup	Khi một phím được释放
submit	Khi một form được gửi
load	Khi một trang hoặc hình ảnh hoàn thành việc tải
change	Khi giá trị của một phần tử đầu vào thay đổi
focus	Khi một phần tử nhận được focus
blur	Khi một phần tử mất focus

Kết Luận

Và thế là bạn đã mở khóa sức mạnh của addEventListener(). Với kiến thức này, bạn có thể tạo ra các trang web tương tác, động, phản hồi theo hành động của người dùng trong thời gian thực.

Nhớ rằng, chìa khóa để thành thạo này (và bất kỳ khái niệm lập trình nào) là thực hành. Hãy thử kết hợp các sự kiện khác nhau, thí nghiệm với các phần tử HTML khác nhau, và quan trọng nhất, hãy vui vẻ với nó!

Ai biết được? có lẽ trang web tương tác lớn tiếp theo sẽ được xây dựng bởi bạn, với kỹ năng bạn đã học hôm nay. Chúc mừng编码, và hy vọng các người nghe sự kiện của bạn luôn chú ý!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Sự kiện DOM

Hướng Dẫn Tiếp Theo:

JavaScript - Sự kiện chuột