Tìm hiểu DOM Events trong JavaScript: Hướng dẫn chi tiết

Giới thiệu

DOM Events là một phần quan trọng trong JavaScript, cho phép bạn tương tác với người dùng thông qua các hành động như nhấp chuột, nhập liệu, hoặc di chuyển chuột. Trong bài viết này, chúng ta sẽ tìm hiểu cách xử lý sự kiện trong JavaScript, từ cơ bản đến nâng cao, bao gồm Event Bubbling, Event Capturing, và cách tạo Custom Events.

Sự kiện trong JavaScript là gì?

Sự kiện (Event) là các hành động hoặc sự kiện xảy ra trong trình duyệt, chẳng hạn như:

• Người dùng nhấp chuột vào một nút.
• Người dùng nhập văn bản vào một ô nhập liệu.
• Trang web được tải hoàn tất.

JavaScript cho phép bạn lắng nghe và xử lý các sự kiện này để tạo ra các ứng dụng web tương tác.

Lắng nghe sự kiện

1. Sử dụng addEventListener

Phương pháp phổ biến nhất để lắng nghe sự kiện là sử dụng addEventListener.

const button = document.getElementById("myButton");

button.addEventListener("click", () => {
  alert("Button clicked!");
});

2. Sử dụng thuộc tính sự kiện (Event Properties)

Bạn cũng có thể gán trực tiếp một hàm xử lý sự kiện vào thuộc tính sự kiện.

const button = document.getElementById("myButton");

button.onclick = () => {
  alert("Button clicked!");
};

Lưu ý: Cách này chỉ cho phép gán một hàm xử lý sự kiện tại một thời điểm.

Event Object

Khi một sự kiện xảy ra, một đối tượng sự kiện (Event Object) được truyền vào hàm xử lý sự kiện. Đối tượng này chứa thông tin chi tiết về sự kiện.

Ví dụ

document.addEventListener("click", (event) => {
  console.log("Loại sự kiện:", event.type);
  console.log("Vị trí chuột:", event.clientX, event.clientY);
});

Event Bubbling và Event Capturing

1. Event Bubbling

Event Bubbling là quá trình sự kiện lan truyền từ phần tử con lên phần tử cha.

document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked");
});

Output khi nhấp vào child:

Child clicked
Parent clicked

2. Event Capturing

Event Capturing là quá trình sự kiện lan truyền từ phần tử cha xuống phần tử con. Để kích hoạt Event Capturing, bạn cần truyền true làm tham số thứ ba cho addEventListener.

document.getElementById("parent").addEventListener(
  "click",
  () => {
    console.log("Parent clicked (capturing)");
  },
  true
);

Ngăn chặn hành vi mặc định và dừng lan truyền sự kiện

1. Ngăn chặn hành vi mặc định

Sử dụng preventDefault() để ngăn chặn hành vi mặc định của trình duyệt.

document.getElementById("link").addEventListener("click", (event) => {
  event.preventDefault();
  console.log("Hành vi mặc định đã bị ngăn chặn");
});

2. Dừng lan truyền sự kiện

Sử dụng stopPropagation() để dừng sự kiện lan truyền.

document.getElementById("child").addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Child clicked");
});

Tạo sự kiện tùy chỉnh (Custom Events)

Bạn có thể tạo và kích hoạt các sự kiện tùy chỉnh bằng cách sử dụng CustomEvent.

Ví dụ

const customEvent = new CustomEvent("myCustomEvent", {
  detail: { message: "Hello, Custom Event!" },
});

document.addEventListener("myCustomEvent", (event) => {
  console.log(event.detail.message);
});

// Kích hoạt sự kiện
document.dispatchEvent(customEvent);

So sánh các phương pháp xử lý sự kiện

Ví dụ thực tế: Xây dựng bộ đếm

HTML:

<div id="counter">
  <button id="decrement">-</button>
  <span id="value">0</span>
  <button id="increment">+</button>
</div>

JavaScript:

let count = 0;

const value = document.getElementById("value");
const increment = document.getElementById("increment");
const decrement = document.getElementById("decrement");

increment.addEventListener("click", () => {
  count++;
  value.textContent = count;
});

decrement.addEventListener("click", () => {
  count--;
  value.textContent = count;
});

Kết luận

Hiểu rõ về DOM Events là một kỹ năng quan trọng để xây dựng các ứng dụng web tương tác. Từ việc lắng nghe sự kiện, xử lý Event Bubbling và Capturing, đến việc tạo Custom Events, bạn có thể tạo ra các trải nghiệm người dùng phong phú và hấp dẫn.

Hãy thực hành các ví dụ trên để nắm vững kiến thức này. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận bên dưới!