Lắng nghe sự kiện với EventListener trong DOM trong JavaScript

Javascript căn bản | 16/04/2025 by Học Javascript

Trong lập trình web, sự kiện (event) đóng vai trò quan trọng trong việc tương tác giữa người dùng và trang web. Khi người dùng nhấn nút, nhập dữ liệu vào biểu mẫu, cuộn trang hay di chuột qua một phần tử, tất cả đều kích hoạt các sự kiện trong DOM (Document Object Model).

JavaScript cung cấp nhiều cách để lắng nghe và xử lý sự kiện, trong đó addEventListener() là phương pháp linh hoạt và hiệu quả nhất. So với cách gán sự kiện trực tiếp bằng thuộc tính như onclick hay onmouseover, addEventListener() cho phép: Đăng ký nhiều sự kiện mà không bị ghi đè.Kiểm soát tốt hơn cách sự kiện lan truyền trong DOM.Dễ dàng thêm hoặc xóa sự kiện khi cần thiết.

Trong bài viết này, mình sẽ tìm hiểu về cách sử dụng EventListener trong JavaScript, cách lắng nghe và xử lý sự kiện một cách tối ưu, cùng với những ví dụ thực tế giúp bạn áp dụng hiệu quả trong lập trình web.

EventListener trong DOM trong JavaScript

Trong JavaScript, EventListener là một cơ chế giúp chúng ta lắng nghe và xử lý các sự kiện xảy ra trên các phần tử trong DOM (Document Object Model). Sự kiện có thể là hành động của người dùng (như nhấn chuột, nhập dữ liệu, cuộn trang) hoặc các sự kiện của trình duyệt (như tải xong tài liệu, thay đổi kích thước cửa sổ).

Phương thức addEventListener() được sử dụng để đăng ký một hoặc nhiều hàm xử lý sự kiện cho một phần tử mà không ghi đè các sự kiện khác.

Cú pháp cơ bản của addEventListener():

element.addEventListener(event, function, useCapture);

event: Tên sự kiện cần lắng nghe (ví dụ: "click", "mouseover", "keydown").
function: Hàm xử lý sự kiện sẽ được thực thi khi sự kiện xảy ra.
useCapture (tùy chọn, mặc định là false): Xác định giai đoạn xử lý sự kiện (Bubbling hoặc Capturing).

Ví dụ đơn giản:

document.getElementById("btn").addEventListener("click", function() {
    alert("Bạn vừa nhấn vào nút!");
});

Tại sao cần sử dụng EventListener thay vì gán sự kiện trực tiếp?

Trong JavaScript, có nhiều cách để gán sự kiện cho một phần tử, nhưng sử dụng addEventListener() có nhiều ưu điểm hơn so với các phương pháp khác như gán trực tiếp thuộc tính sự kiện (onclick, onmouseover, ...).

Ví dụ, nếu sử dụng cách gán trực tiếp sự kiện:

document.getElementById("btn").onclick = function() {
    alert("Sự kiện click!");
};

Nhược điểm của cách này:

Ghi đè sự kiện trước đó: Nếu gán một sự kiện mới, sự kiện cũ sẽ bị ghi đè.

document.getElementById("btn").onclick = function() {
    alert("Sự kiện mới!");
};

Sự kiện onclick ban đầu sẽ bị thay thế bởi sự kiện mới.

Không thể gán nhiều sự kiện cho cùng một phần tử:

 document.getElementById("btn").onclick = function() {
    alert("Lần 1");
};
document.getElementById("btn").onclick = function() {
    alert("Lần 2");
};

Chỉ hiển thị "Lần 2", vì sự kiện đầu đã bị ghi đè.

Ngược lại, với addEventListener(), chúng ta có thể đăng ký nhiều sự kiện mà không bị ghi đè:

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
    alert("Lần 1");
});

btn.addEventListener("click", function() {
    alert("Lần 2");
});

Khi nhấn nút, cả hai alert sẽ hiển thị.

Lợi ích của EventListener

Sử dụng addEventListener() mang lại nhiều lợi ích:

Hỗ trợ nhiều sự kiện trên cùng một phần tử

Một phần tử có thể có nhiều sự kiện mà không bị ghi đè lên nhau.

Tách biệt logic xử lý sự kiện

Có thể dễ dàng thêm hoặc xóa sự kiện mà không ảnh hưởng đến mã nguồn chính.

Hỗ trợ Event Capturing và Bubbling

Cho phép kiểm soát cách sự kiện lan truyền trong DOM.

Có thể sử dụng removeEventListener() để hủy sự kiện

Giúp tối ưu hiệu suất bằng cách loại bỏ sự kiện không cần thiết.

Ví dụ về hủy sự kiện:

function showMessage() {
    alert("Hello!");
}

document.getElementById("btn").addEventListener("click", showMessage);

// Hủy bỏ sự kiện sau 5 giây
setTimeout(function() {
    document.getElementById("btn").removeEventListener("click", showMessage);
}, 5000);

Sau 5 giây, sự kiện click sẽ bị gỡ bỏ, và khi nhấn nút sẽ không có phản hồi.

Cách sử dụng addEventListener() trong JavaScript

Phương thức `addEventListener()` cho phép chúng ta lắng nghe và xử lý sự kiện trên các phần tử trong DOM. Cú pháp chung như sau:

element.addEventListener(event, function, useCapture);

Giải thích tham số:

event: Tên sự kiện cần lắng nghe, chẳng hạn như "click", "mouseover", "keydown", v.v.

function: Hàm xử lý sự kiện khi sự kiện xảy ra.

useCapture (tùy chọn): Một giá trị Boolean (true hoặc false).

Mặc định là false: Sự kiện sẽ được xử lý theo cơ chế bubbling (lan truyền từ trong ra ngoài).
Nếu là true: Sự kiện sẽ được xử lý theo cơ chế capturing (lan truyền từ ngoài vào trong).

Ví dụ đơn giản: Lắng nghe sự kiện click trên nút

Dưới đây là một ví dụ cơ bản về cách sử dụng addEventListener() để lắng nghe sự kiện "click" trên một nút:

HTML

<button id="myButton">Nhấn tôi</button>
<p id="message"></p>

JavaScript

// Lấy phần tử nút từ DOM
let button = document.getElementById("myButton");

// Lắng nghe sự kiện click và thực hiện một hành động
button.addEventListener("click", function() {
    document.getElementById("message").innerText = "Bạn đã nhấn vào nút!";
});

Giải thích:

Lấy phần tử nút bằng document.getElementById("myButton").
Gán một trình lắng nghe sự kiện "click" vào nút bằng addEventListener().
Khi người dùng nhấn nút, nội dung của thẻ <p> có id "message" sẽ được thay đổi thành "Bạn đã nhấn vào nút!".

Sử dụng addEventListener() với nhiều sự kiện trên cùng một phần tử

Một trong những ưu điểm của addEventListener() là nó cho phép gán nhiều sự kiện mà không bị ghi đè lên nhau.

Ví dụ: Lắng nghe cả hai sự kiện "mouseover" (di chuột vào) và "mouseout" (rời chuột khỏi) trên một nút:

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

button.addEventListener("mouseover", function() {
    button.style.backgroundColor = "lightblue";
});

button.addEventListener("mouseout", function() {
    button.style.backgroundColor = "";
});

Trong ví dụ này:

Khi người dùng di chuột vào nút, màu nền sẽ chuyển sang xanh nhạt.
Khi di chuột ra khỏi nút, màu nền sẽ trở lại mặc định.

Xóa sự kiện bằng removeEventListener()

Nếu không muốn lắng nghe một sự kiện nữa, chúng ta có thể sử dụng removeEventListener().

Ví dụ: Xóa sự kiện click khỏi nút sau lần nhấn đầu tiên:

function handleClick() {
    document.getElementById("message").innerText = "Sự kiện đã bị xóa!";
    button.removeEventListener("click", handleClick);
}

let button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

Lưu ý: Khi sử dụng removeEventListener(), hàm xử lý sự kiện phải được đặt trong một biến hoặc khai báo bên ngoài addEventListener(). Nếu truyền một hàm ẩn danh, sự kiện sẽ không bị xóa.

Sử dụng removeEventListener() để hủy sự kiện trong JavaScript

Phương thức `removeEventListener()` được sử dụng để gỡ bỏ một trình lắng nghe sự kiện đã được thêm bằng `addEventListener()`.

Cú pháp:

element.removeEventListener(event, function);

Giải thích tham số:

event: Tên sự kiện cần gỡ bỏ (ví dụ: "click", "mouseover").
function: Hàm xử lý sự kiện đã được sử dụng trong addEventListener(). Lưu ý rằng hàm này phải có cùng tham chiếu với hàm được sử dụng trước đó. Nếu sử dụng một hàm ẩn danh (anonymous function), sự kiện sẽ không thể bị gỡ bỏ.

Lưu ý quan trọng khi sử dụng removeEventListener()

Hàm xử lý sự kiện phải được tham chiếu
Khi sử dụng addEventListener(), nếu gán một hàm ẩn danh, bạn sẽ không thể gỡ bỏ sự kiện bằng removeEventListener() vì nó không có tham chiếu đến hàm ban đầu.

Ví dụ sai (sự kiện không thể bị gỡ bỏ):

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

// Gán sự kiện bằng hàm ẩn danh
button.addEventListener("click", function() {
    console.log("Nút đã được nhấn!");
});

// Cố gắng xóa sự kiện (Không hiệu quả)
button.removeEventListener("click", function() {
    console.log("Nút đã được nhấn!");
});

Trong ví dụ trên, removeEventListener() không có tác dụng vì nó nhận một hàm mới, không phải là hàm đã được đăng ký trước đó.

Cách đúng để có thể xóa sự kiện

Ví dụ đúng (sử dụng tham chiếu hàm để có thể gỡ bỏ sự kiện):

function handleClick() {
    console.log("Nút đã được nhấn!");
}

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

// Gán sự kiện
button.addEventListener("click", handleClick);

// Gỡ bỏ sự kiện
button.removeEventListener("click", handleClick);

Ví dụ thực tế: Bật/tắt sự kiện khi nhấn nút

Trong ví dụ sau, chúng ta sẽ tạo một nút có thể bật/tắt sự kiện click bằng một nút điều khiển.

HTML

<button id="toggleEvent">Bật/Tắt sự kiện</button>
<button id="clickMe">Nhấn tôi</button>
<p id="message"></p>

JavaScript

let clickButton = document.getElementById("clickMe");
let toggleButton = document.getElementById("toggleEvent");
let message = document.getElementById("message");

function handleClick() {
    message.innerText = "Bạn đã nhấn vào nút!";
}

// Ban đầu, sự kiện được gán vào nút
clickButton.addEventListener("click", handleClick);

let eventActive = true;

toggleButton.addEventListener("click", function () {
    if (eventActive) {
        clickButton.removeEventListener("click", handleClick);
        message.innerText = "Sự kiện đã bị tắt!";
        toggleButton.innerText = "Bật sự kiện";
    } else {
        clickButton.addEventListener("click", handleClick);
        message.innerText = "Sự kiện đã được bật!";
        toggleButton.innerText = "Tắt sự kiện";
    }
    eventActive = !eventActive;
});

Giải thích:

Khi trang tải, sự kiện click được gán cho nút "clickMe".
Khi nhấn nút "toggleEvent", sự kiện click trên "clickMe" sẽ được bật hoặc tắt.
Khi sự kiện bị tắt, nhấn vào "clickMe" sẽ không có tác dụng.
Khi sự kiện được bật lại, nhấn "clickMe" sẽ hiển thị thông báo "Bạn đã nhấn vào nút!".

Xử lý nhiều sự kiện trên cùng một phần tử trong JavaScript

Trong JavaScript, bạn có thể đăng ký nhiều sự kiện khác nhau trên cùng một phần tử bằng cách sử dụng addEventListener(). Điều này giúp dễ dàng quản lý và mở rộng các hành vi của phần tử mà không ghi đè lên các sự kiện trước đó.

Đăng ký nhiều sự kiện bằng addEventListener()

Với addEventListener(), bạn có thể gọi nó nhiều lần trên cùng một phần tử với các loại sự kiện khác nhau.

Ví dụ: Lắng nghe sự kiện `mouseover` và `click` trên một phần tử

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

// Sự kiện khi di chuột vào
button.addEventListener("mouseover", function () {
    button.style.backgroundColor = "lightblue";
});

// Sự kiện khi rời chuột khỏi nút
button.addEventListener("mouseout", function () {
    button.style.backgroundColor = "";
});

// Sự kiện khi nhấn nút
button.addEventListener("click", function () {
    alert("Bạn đã nhấn vào nút!");
});

Giải thích:

Khi di chuột vào nút, màu nền sẽ chuyển sang xanh nhạt (lightblue).
Khi di chuột ra khỏi nút, màu nền trở về bình thường.
Khi nhấn vào nút, một thông báo (alert) sẽ hiển thị.

Lưu ý: Nếu bạn sử dụng element.onclick = function() {} thay vì addEventListener(), mỗi lần gán sự kiện mới sẽ ghi đè sự kiện cũ. Vì vậy, addEventListener() là cách tiếp cận tốt hơn khi cần đăng ký nhiều sự kiện trên cùng một phần tử.

Truyền đối tượng sự kiện (event object) vào hàm xử lý trong JavaScript

Khi một sự kiện xảy ra, trình duyệt sẽ tạo một đối tượng event chứa thông tin chi tiết về sự kiện đó. Bạn có thể sử dụng đối tượng event để kiểm tra phần tử kích hoạt, loại sự kiện, hoặc ngăn chặn hành vi mặc định.

Sử dụng event.target để xác định phần tử kích hoạt sự kiện

event.target giúp bạn lấy ra phần tử cụ thể đã kích hoạt sự kiện.

Ví dụ: Hiển thị phần tử được nhấn trong danh sách

document.getElementById("list").addEventListener("click", function (event) {
    alert("Bạn đã nhấn vào: " + event.target.innerText);
});

HTML tương ứng:

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Giải thích:

Khi người dùng nhấn vào bất kỳ mục nào trong danh sách (<li>), một thông báo sẽ hiển thị nội dung của mục đó.
event.target.innerText lấy nội dung của phần tử vừa được nhấn.

Sử dụng event.type để lấy loại sự kiện

event.type trả về tên của sự kiện vừa xảy ra.

Ví dụ: Kiểm tra loại sự kiện

document.getElementById("myButton").addEventListener("mouseover", function (event) {
    console.log("Sự kiện xảy ra: " + event.type);
});

document.getElementById("myButton").addEventListener("click", function (event) {
    console.log("Sự kiện xảy ra: " + event.type);
});

Giải thích:

Khi di chuột vào nút, sẽ hiển thị "Sự kiện xảy ra: mouseover".
Khi nhấn vào nút, sẽ hiển thị "Sự kiện xảy ra: click".

Ngăn chặn hành động mặc định với event.preventDefault()

Một số phần tử HTML có hành vi mặc định khi xảy ra sự kiện (ví dụ: khi nhấn vào liên kết <a>, trình duyệt sẽ chuyển hướng, khi nhấn submit trong form, trang sẽ tải lại). Để ngăn chặn những hành động này, ta sử dụng event.preventDefault().

Ví dụ: Ngăn chặn form tự động gửi khi nhấn nút submit

document.getElementById("myForm").addEventListener("submit", function (event) {
    event.preventDefault(); // Ngăn chặn form gửi đi
    alert("Form đã bị chặn gửi!");
});

HTML tương ứng:

<form id="myForm">
    <input type="text" placeholder="Nhập tên">
    <button type="submit">Gửi</button>
</form>

Giải thích:

Khi người dùng nhấn vào nút "Gửi", form thường sẽ gửi dữ liệu và tải lại trang.
event.preventDefault() ngăn chặn hành động mặc định này, hiển thị thông báo "Form đã bị chặn gửi!" thay vì gửi đi.

Sự kiện Bubbling và Capturing trong EventListener trong JavaScript

Trong JavaScript, khi một sự kiện xảy ra trên một phần tử, sự kiện đó không chỉ ảnh hưởng đến phần tử đó mà còn có thể lan truyền lên hoặc xuống các phần tử cha/con trong cây DOM. Cơ chế này gọi là Event Bubbling (Nổi bọt) và Event Capturing (Bắt sự kiện từ trên xuống).

Hiện tượng nổi bọt (Event Bubbling)

Bubbling là quá trình một sự kiện được kích hoạt trên một phần tử trước tiên, sau đó lan truyền lên các phần tử cha của nó trong DOM.

Ví dụ: Event Bubbling trên danh sách

<ul id="parentList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

document.getElementById("parentList").addEventListener("click", function () {
    alert("Sự kiện xảy ra trên phần tử cha!");
});

Giải thích:

Khi bạn nhấn vào một <li>, sự kiện click xảy ra trên <li>, sau đó lan lên <ul> (phần tử cha), kích hoạt trình xử lý sự kiện của <ul>.
Nếu bạn có nhiều lớp lồng nhau, sự kiện tiếp tục lan truyền lên trên.

Lưu ý: Event Bubbling xảy ra theo mặc định trong JavaScript.

Giai đoạn Capturing (Bắt sự kiện từ trên xuống)

Event Capturing là quá trình ngược lại của Bubbling. Trong giai đoạn này, sự kiện sẽ đi từ phần tử cha xuống các phần tử con trước khi được xử lý tại phần tử được nhấn.

Cách kích hoạt Capturing bằng tham số `true` trong `addEventListener()`

document.getElementById("parentList").addEventListener(
    "click",
    function () {
        alert("Sự kiện xảy ra trên phần tử cha trước!");
    },
    true // Kích hoạt chế độ capturing
);

Giải thích:

Khi bạn nhấn vào một <li>, trình xử lý sự kiện trên <ul> sẽ chạy trước trình xử lý trên <li>, do sử dụng true trong addEventListener().

Mặc định, các sự kiện sử dụng Bubbling. Nếu muốn dùng Capturing, bạn phải đặt true trong addEventListener() như trên.

Ngăn chặn sự kiện nổi bọt bằng event.stopPropagation()

Nếu bạn chỉ muốn sự kiện xảy ra trên phần tử cụ thể mà không lan truyền lên trên, bạn có thể sử dụng event.stopPropagation().

document.querySelector("li").addEventListener("click", function (event) {
    alert("Sự kiện chỉ chạy trên phần tử này!");
    event.stopPropagation(); // Ngăn sự kiện lan lên phần tử cha
});

Lưu ý: event.stopPropagation() không ngăn chặn các sự kiện khác trên cùng phần tử, mà chỉ dừng lan truyền lên trên.

Ủy quyền sự kiện (Event Delegation) trong JavaScript

Event Delegation là một kỹ thuật giúp bạn xử lý sự kiện trên các phần tử con mà không cần gán sự kiện riêng lẻ cho từng phần tử. Điều này rất hữu ích khi làm việc với danh sách động, nơi các phần tử có thể được thêm hoặc xóa.

Tại sao cần ủy quyền sự kiện?

Nếu bạn gán sự kiện cho từng phần tử con, khi thêm phần tử mới vào DOM, sự kiện sẽ không áp dụng cho phần tử mới.
Giúp tối ưu hiệu suất bằng cách chỉ gán sự kiện một lần trên phần tử cha thay vì từng phần tử con.

Ví dụ: Lắng nghe sự kiện click trên danh sách động

HTML

<ul id="dynamicList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="addItem">Thêm Item</button>

JavaScript

document.getElementById("dynamicList").addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
        alert("Bạn đã nhấn vào: " + event.target.innerText);
    }
});

document.getElementById("addItem").addEventListener("click", function () {
    let newItem = document.createElement("li");
    newItem.textContent = "Item mới";
    document.getElementById("dynamicList").appendChild(newItem);
});

Giải thích:

Khi bạn nhấn vào một <li>, sự kiện click trên <ul> sẽ bắt được sự kiện, sau đó kiểm tra nếu phần tử nhấn (event.target) là <li> thì mới thực thi hành động.
Khi thêm phần tử <li> mới, bạn không cần gán lại sự kiện vì sự kiện đã được lắng nghe trên <ul>.

Xóa phần tử với ủy quyền sự kiện

Bạn cũng có thể dùng Event Delegation để xóa phần tử động.

Cập nhật JavaScript để xóa phần tử

document.getElementById("dynamicList").addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
        event.target.remove(); // Xóa phần tử khi nhấn vào
    }
});

Giải thích:

Khi nhấn vào một <li>, phần tử đó sẽ bị xóa khỏi danh sách.
Không cần gán sự kiện riêng lẻ cho từng <li>, giúp tiết kiệm tài nguyên và tối ưu hiệu suất.

Ví dụ thực tế về EventListener trong DOM trong JavaScript

Dưới đây là một số ví dụ minh họa cách sử dụng addEventListener() trong các tình huống thực tế.

Thêm sự kiện click vào một nút để hiển thị thông báo

HTML

<button id="showMessage">Nhấn vào đây</button>
<p id="message"></p>

JavaScript

document.getElementById("showMessage").addEventListener("click", function () {
    document.getElementById("message").textContent = "Bạn vừa nhấn vào nút!";
});

Giải thích

Khi người dùng nhấn vào nút #showMessage, sự kiện click sẽ được kích hoạt.
Nội dung của phần tử <p> có id="message" sẽ thay đổi thành "Bạn vừa nhấn vào nút!".

Thay đổi màu sắc khi di chuột vào một phần tử

HTML

<div id="hoverBox" style="width: 200px; height: 100px; background-color: lightgray; text-align: center; line-height: 100px;">
    Di chuột vào đây
</div>

JavaScript

let box = document.getElementById("hoverBox");

box.addEventListener("mouseover", function () {
    box.style.backgroundColor = "lightblue";
    box.textContent = "Chuột đang ở đây!";
});

box.addEventListener("mouseout", function () {
    box.style.backgroundColor = "lightgray";
    box.textContent = "Di chuột vào đây";
});

Giải thích

Khi di chuột vào #hoverBox, màu nền thay đổi thành xanh nhạt và nội dung đổi thành "Chuột đang ở đây!".
Khi rời chuột khỏi hộp, màu nền và nội dung quay lại trạng thái ban đầu.

Xử lý sự kiện bàn phím để kiểm tra nội dung nhập vào ô input

HTML

<input type="text" id="nameInput" placeholder="Nhập tên của bạn">
<p id="feedback"></p>

JavaScript

document.getElementById("nameInput").addEventListener("keyup", function (event) {
    let inputValue = event.target.value;
    let feedback = document.getElementById("feedback");

    if (inputValue.trim() === "") {
        feedback.textContent = "Vui lòng nhập tên!";
        feedback.style.color = "red";
    } else {
        feedback.textContent = `Xin chào, ${inputValue}!`;
        feedback.style.color = "green";
    }
});

Giải thích

Khi người dùng nhập dữ liệu vào ô #nameInput, sự kiện keyup sẽ kích hoạt.
Nếu ô input trống, hiển thị thông báo lỗi màu đỏ "Vui lòng nhập tên!".
Nếu có nội dung, hiển thị "Xin chào, <Tên nhập vào>!" với màu xanh.

Ủy quyền sự kiện để xử lý danh sách động

HTML

<ul id="itemList">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<button id="addItem">Thêm Item</button>

JavaScript

document.getElementById("itemList").addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
        alert(`Bạn đã nhấn vào: ${event.target.textContent}`);
    }
});

document.getElementById("addItem").addEventListener("click", function () {
    let newItem = document.createElement("li");
    newItem.textContent = `Item ${document.querySelectorAll("#itemList li").length + 1}`;
    document.getElementById("itemList").appendChild(newItem);
});

Giải thích

Event Delegation được sử dụng để xử lý sự kiện click trên danh sách <ul>, dù các <li> được thêm sau này vẫn có thể bắt sự kiện.
Khi nhấn vào một <li>, một thông báo sẽ hiển thị với nội dung "Bạn đã nhấn vào: Item X".
Nút "Thêm Item" sẽ thêm một mục mới vào danh sách.

Kết bài

Trong bài viết này, tìm hiểu đã tìm hiểu cách sử dụng addEventListener() trong JavaScript để lắng nghe và xử lý sự kiện trong HTML DOM. Việc sử dụng EventListener không chỉ giúp mã nguồn gọn gàng, dễ bảo trì mà còn cho phép đăng ký nhiều sự kiện trên cùng một phần tử mà không ghi đè các sự kiện trước đó.

Mình cũng đã tìm hiểu cách removeEventListener(), xử lý bubbling và capturing, cũng như áp dụng Event Delegation để tối ưu hóa hiệu suất khi làm việc với các phần tử động. Những ví dụ thực tế đã minh họa rõ ràng cách sử dụng sự kiện để tạo ra các tương tác mượt mà và hiệu quả trên trang web.