DOM (Document Object Model) là giao diện lập trình cho tài liệu HTML và XML, cho phép JavaScript tương tác với các phần tử trên trang web. Việc xử lý sự kiện là một phần thiết yếu trong việc xây dựng giao diện động và phản ứng nhanh với hành vi người dùng.
1. Truy cập và thao tác với phần tử
Để thay đổi nội dung hoặc thuộc tính của một phần tử, trước tiên cần lấy tham chiếu đến nó — thường thông qua document.getElementById().
- Thay đổi thuộc tính: Ví dụ, cập nhật
srccủa thẻ<img>để đổi hình ảnh. - Cập nhật nội dung: Dùng thuộc tính
innerHTMLđể thay thế toàn bộ nội dung bên trong một thẻ.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Đổi Ảnh Động</title>
</head>
<body>
<img id="lamp" src="assets/off.png" alt="Đèn tắt">
<script>
const lamp = document.getElementById("lamp");
lamp.src = "assets/on.png"; // Thay đổi nguồn ảnh
</script>
</body>
</html><!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Cập Nhật Tiêu Đề</title>
</head>
<body>
<h2 id="header">Người sáng lập Alibaba</h2>
<script>
const header = document.getElementById("header");
header.innerHTML = "CEO JD – Lưu Cường Đông";
</script>
</body>
</html>2. Gắn sự kiện vào phần tử
Có hai cách phổ biến để gắn sự kiện như click:
- Cách inline: Viết trực tiếp trong thẻ HTML (không khuyến khích vì làm loãng logic).
- Cách thông qua JavaScript: Lấy phần tử rồi gán hàm xử lý vào thuộc tính sự kiện (ví dụ
element.onclick = handler).
<body>
<button id="btn1">Nhấn tôi (inline)</button>
<button id="btn2">Nhấn tôi (JS)</button>
<script>
function handleBtn1() {
console.log("Đã nhấn nút 1");
}
const btn2 = document.getElementById("btn2");
btn2.onclick = () => console.log("Đã nhấn nút 2");
// Gắn sự kiện cho nút 1
document.getElementById("btn1").onclick = handleBtn1;
</script>
</body>3. Thực hành: Công tắc đèn hai trạng thái
Một ví dụ điển hình về xử lý sự kiện click lặp lại: chuyển đổi giữa hai trạng thái (bật/tắt) bằng cách kiểm tra giá trị hiện tại của thuộc tính src hoặc sử dụng biến trạng thái.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Công Tắc Đèn</title>
</head>
<body>
<img id="switch" src="assets/light-off.svg" alt="Đèn đang tắt">
<script>
const switcher = document.getElementById("switch");
let isOn = false;
switcher.addEventListener("click", () => {
if (isOn) {
switcher.src = "assets/light-off.svg";
switcher.alt = "Đèn đang tắt";
} else {
switcher.src = "assets/light-on.svg";
switcher.alt = "Đèn đang bật";
}
isOn = !isOn;
});
</script>
</body>
</html>