Loạt bài JavaScript cơ bản · Bài 15/18 — Mục lục học tập

Giao diện cần phản hồi khi người dùng bấm nút hoặc nhập dữ liệu. Sự kiện mô tả các tình huống này; addEventListener đăng ký hàm được gọi khi sự kiện xảy ra. Bạn sẽ dùng biến trạng thái kết hợp hàm render để tạo bộ đếm.

HTML của bộ đếm

Tạo index.html theo bài 2, giữ script app.js với defer. Đặt phần sau trong body:

<h1>Bộ đếm luyện tập</h1>
<p id="counter" aria-live="polite">0</p>
<button id="increase" type="button">Tăng 1</button>
<button id="reset" type="button">Đặt lại</button>

Dùng button thật để có hành vi bàn phím mặc định. type=”button” tránh việc nút vô tình gửi biểu mẫu khi bạn đặt nó trong một form sau này. aria-live giúp công nghệ hỗ trợ nhận biết phần nội dung được cập nhật.

Tách dữ liệu và hiển thị

const counter = document.querySelector("#counter");
const increaseButton = document.querySelector("#increase");
const resetButton = document.querySelector("#reset");
let count = 0;

function render() {
  counter.textContent = String(count);
}

increaseButton.addEventListener("click", () => {
  count += 1;
  render();
});

resetButton.addEventListener("click", () => {
  count = 0;
  render();
});

render();

Ví dụ giả định ba ID trong HTML đều tồn tại và script chạy sau khi phân tích HTML. Nếu tái sử dụng trên trang khác, hãy kiểm tra các phần tử trước khi đăng ký sự kiện. count là trạng thái; render có nhiệm vụ đồng bộ trạng thái lên giao diện. Cách này rõ ràng hơn đọc con số từ giao diện rồi coi nó là nguồn dữ liệu chính.

Truyền hàm, không gọi hàm ngay

function handleClick(event) {
  console.log("Loại sự kiện:", event.type);
  console.log("Phần tử được bấm:", event.target);
}
increaseButton.addEventListener("click", handleClick);

Trong addEventListener, truyền handleClick thay vì handleClick(). Dạng có ngoặc gọi hàm ngay và thường đưa giá trị trả về sai vào vị trí callback. Bạn có thể dùng hàm có tên khi cần tái sử dụng hoặc tháo listener sau này.

event.target và event.currentTarget

target là phần tử nơi sự kiện bắt nguồn; currentTarget là phần tử đang xử lý listener. Nếu bên trong nút có một biểu tượng và người dùng bấm biểu tượng, target có thể là biểu tượng, còn currentTarget vẫn là nút. Phân biệt này hữu ích khi dùng một listener cho cả danh sách.

Bài tập

Thêm nút giảm nhưng không cho số đếm xuống dưới 0. Kiểm tra bằng chuột và bằng phím Tab, Enter hoặc Space.

// HTML thêm: <button id="decrease" type="button">Giảm 1</button>
const decreaseButton = document.querySelector("#decrease");
decreaseButton.addEventListener("click", () => {
  count = Math.max(0, count - 1);
  render();
});

Ghi nhớ: mỗi sự kiện cập nhật dữ liệu rồi gọi render. Tránh đăng ký thêm listener mỗi lần render vì một lần bấm có thể bị xử lý nhiều lần.