Event Listeners trong JavaScript

Trong bài hướng dẫn tự học lập trình này, bạn sẽ tìm hiểu về DOM Event Listener trong JavaScript.

1. Event Listeners là gì?

Event Listeners (hay Trình lắng nghe sự kiện) cũng giống như event handlers, ngoại trừ việc bạn có thể chỉ định bao nhiêu trình xử lý sự kiện tùy thích cho một sự kiện cụ thể trên phần tử cụ thể.

Để hiểu cách thức hoạt động của trình Event Listeners, hãy xem một ví dụ đơn giản

Giả sử rằng bạn đã tạo hai hàm và bạn cố gắng thực thi cả hai hàm khi click vào nút bằng cách sử dụng trình xử lý sự kiện onclick, như được hiển thị trong ví dụ sau:

HTML:

<button id="myBtn">Click vào đây</button>

JS:

// Tạo ra các hàm tùy chỉnh
function hamDauTien() {
    alert("Hàm đầu tiên thực thi thành công!");
}
 
function hamThuHai() {
    alert("Hàm thứ hai thực thi thành công!");
}
 
// Nhắm đến phần tử myBtn
var btn = document.getElementById("myBtn");
 
// Gán Event Listener cho phần tử button
btn.addEventListener("click", hamDauTien);
btn.addEventListener("click", hamThuHai);

Bạn chạy ví dụ trên và click vào phần tử button, chỉ hamThuHai() được thực thi, vì việc gán trình xử lý sự kiện thứ hai sẽ ghi đè trình xử lý sự kiện đầu tiên.

Đây là thiếu sót chính của mô hình sự kiện cổ điển này — bạn chỉ có thể chỉ định một trình xử lý sự kiện cho một sự kiện cụ thể trên một phần tử cụ thể, tức là một hàm duy nhất cho mỗi sự kiện trên mỗi phần tử.

Để giải quyết vấn đề này, W3C đã giới thiệu mô hình sự kiện linh hoạt hơn được gọi là Event Listeners.

Bất kỳ phần tử HTML nào cũng có thể có nhiều Event Listener, do đó bạn có thể gán nhiều hàm cho cùng một sự kiện cho cùng một phần tử, như được minh họa trong ví dụ sau:

<button id="myBtn">Click vào đây</button>
 
<script>
// Tạo ra các hàm tùy chỉnh
function hamDauTien() {
    alert("Hàm đầu tiên thực thi thành công!");
}
 
function hamThuHai() {
    alert("Hàm thứ hai thực thi thành công!");
}
 
// Nhắm đến phần tử myBtn
var btn = document.getElementById("myBtn");
 
// Gán Event Listener cho phần tử button
btn.addEventListener("click", hamDauTien);
btn.addEventListener("click", hamThuHai);
</script>

Bây giờ, nếu bạn chạy ví dụ trên và click vào nút đó, cả hai hàm sẽ được thực thi chứ không bị ghi đè nữa.

Ngoài loại sự kiện và tham số hàm được truyền vào, addEventListener() chấp nhận thêm một tham số Boolean useCapture.

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

target.addEventListener(event, function, useCapture);

Trong đó:

    + target: Đây là phần tử bạn cần thêm Event Listeners vào. (Sử dụng DOM Selector).

    + event: Là các loại sự kiện như click, mouseover, ... (Xem danh sách ở đây)

    + function: Tên hàm bạn cần thêm vào

    + useCapture: Giá trị boolean (mặc định là false) là tham số được sử dụng để xử lý sự kiện lan truyền. Chúng ta sẽ học ở bài khác bạn nhé.

2. Thêm các kiểu Event Listener khác nhau cho phần tử

Giống như Event Handler, bạn có thể chỉ định các Event Listener khác nhau cho các loại sự kiện khác nhau trên cùng một phần tử.

Ví dụ sau sẽ gán các hàm khác nhau cho các sự kiện 'click', 'mouseover' và 'mouseout' của một phần tử button.

HTML:

<button id="myBtn">Click vào đây</button>

JS:

// Nhắm đến phần tử myBtn
var btn = document.getElementById("myBtn");
 
// Tạo ra các hàm tùy chỉnh
function xinChao() {
    alert("Xin chào, bạn đang làm gì thế?");
}
 
function thietLapMauHover() {
    btn.style.background = "yellow";
}
 
function thietLapMauBinhThuong() {
    btn.style.background = "";
}
 
// Gán event listeners cho myBtn
btn.addEventListener("click", xinChao);
btn.addEventListener("mouseover", thietLapMauHover);
btn.addEventListener("mouseout", thietLapMauBinhThuong);

Thử chạy trên trình duyệt của bạn để xem kết quả nhé.

3. Thêm Event Listeners vào Window Object

Phương thức addEventListener() cho phép bạn thêm trình xử lý sự kiện vào bất kỳ phần tử DOM HTML nào. Cho đó đó là Window object, Document object hay bất kỳ đối tượng nào khác hỗ trợ sự kiện.

Ví dụ: Đối tượng XMLHttpRequest. Dưới đây là một ví dụ đính kèm một trình xử lý sự kiện vào sự kiện 'thay đổi kích thước' của cửa sổ:

HTML:

<div id="ketQua"></div>

JS:

// Định nghĩa hàm hiển thị kích thước
function hienThiKichThuocCuaSo() {
    var w = window.innerWidth;
    var h = window.innerHeight;
    var kichThuoc = "Rộng: " + w + ", " + "Cao: " + h;
    document.getElementById("ketQua").innerHTML = kichThuoc;
}
 
// Gắn hàm để lắng nghe sự kiện thay đổi kích thước màn hình
window.addEventListener("resize", hienThiKichThuocCuaSo);

4. Xóa Event Listeners

Bạn có thể sử dụng phương thức removeEventListener() để xóa một Event Listener đã được đính kèm trước đó với phương thức addEventListener().

Đây là một ví dụ:

HTML:

<div id="myBtn">Click vào đây</div>

JS:

function thongBao() {
    alert(Ví dụ xóa Event Listener);
}

// Nhắm đến phần tử myBtn
var btn = document.getElementById("myBtn");

// Thêm sự kiện
btn.addEventListener("click", thongBao);

// Xóa sự kiện
btn.removeEventListener("click", thongBao);

Lưu ý: Phương thức addEventListener() và removeEventListener() được hỗ trợ trong tất cả các trình duyệt chính. Không được hỗ trợ trong IE 8 trở về trước và Opera 6.0 trở về trước.

Tổng kết

Như vậy, mình đã giới thiệu qua với bạn về Event Listener trong Java. Hi vọng bạn có những hiểu biết thêm nhất định để xử lý sự kiện trong JavaScript hiệu quả hơn.