Events! Một phần không thể thiếu của một trang web. Chúng giúp người dùng có cảm giác rằng đang thực sự tương tác với trang web, không chỉ đơn thuần như đọc báo hay xem phim. Event đơn giản là các hành động xảy ra trong trình duyệt được tạo ra bởi người dùng hoặc bởi trình duyệt. Ví dụ, khi người dùng click chuột vào một phần tử, gõ văn bản vào ô input, hoặc di chuyển con trỏ vào một phần tử nào đó.
Trong bài viết này, chúng ta sẽ tìm hiểu về hai cách xử lý sự kiện và cách sử dụng chúng trong từng trường hợp.
Sử dụng Event Handler
Bạn có thể sử dụng thuộc tính EventHandler của đối tượng để "bắt sự kiện".
Nghe có vẻ hơi phức tạp, nhưng có thể bạn đã từng làm điều này mà không biết tên của nó.
const button = document.querySelector(".btn");
button.onclick = function() {
console.log("Xin chào!");
};Trong ví dụ này, thuộc tính onclick được sử dụng để khi người dùng nhấp vào button, nó sẽ in ra dòng chữ "Xin chào!" vào console log. Thuộc tính "onclick" chỉ là một trong những EventHandler có thể sử dụng được. Dưới đây là một số thuộc tính thông dụng khác:
onclick: Sự kiện xảy ra khi click vào thẻ HTML.ondbclick: Sự kiện xảy ra khi double click vào thẻ HTML.onchange: Sự kiện xảy ra khi giá trị (value) của thẻ HTML thay đổi. Thường dùng trong các đối tượng input trong form.onmouseover: Sự kiện xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML.onmouseout: Sự kiện xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML.onmouseenter: Tương tự như onmouseover.onmouseleave: Tương tự như onmouseout.onmousemove: Sự kiện xảy ra khi con chuột di chuyển bên trong thẻ HTML.onkeydown: Sự kiện xảy ra khi gõ một phím bất kỳ vào ô input.onload: Sự kiện xảy ra khi thẻ HTML bắt đầu chạy, tương tự như hàm khởi tạo trong lập trình hướng đối tượng.onkeyup: Sự kiện xảy ra khi bạn gõ phím và nhả phím ra.onkeypress: Sự kiện xảy ra khi bạn nhấn một phím vào ô input.onblur: Sự kiện xảy ra khi con trỏ chuột rời khỏi ô input.oncopy: Sự kiện xảy ra khi bạn copy nội dung của thẻ.oncut: Sự kiện xảy ra khi bạn cắt nội dung của thẻ.onpaste: Sự kiện xảy ra khi bạn dán nội dung vào thẻ.
Thêm Event Listener
Ngoài các thuộc tính EventHandler trên, chúng ta cũng có thể thêm các sự kiện vào đối tượng thông qua phương thức addEventListener.
Bằng cách thêm event listener vào một đối tượng, chúng ta có thể bắt được một loạt sự kiện do người dùng hoặc trình duyệt tạo ra.
const button = document.querySelector(".btn");
button.addEventListener("click", function(event) {
console.log("Xin chào!");
})Thay vì sử dụng thuộc tính onclick, ở đây chúng ta sử dụng phương thức addEventListener():
target.addEventListener(event, function, useCapture);target: Đây là phần tử bạn muốn thêm Event Listener vào (dùng DOM Selector).event: Là các loại sự kiện như click, mouseover, ...function: Tên hàm bạn muốn thêm vào.
Khác biệt giữa Event Handlers và addEventListener
Nếu bạn sử dụng Event Handler, điểm khác biệt rõ ràng nhất chính là nếu bạn thêm nhiều sự kiện cùng loại cho một phần tử (ví dụ như onclick vào nút), thì sự kiện thứ hai sẽ ghi đè lên sự kiện đầu tiên và chỉ sự kiện thứ hai được thực thi. Nguyên nhân là:
"Đối với một phần tử nhất định, bạn chỉ có thể có một event handler cho mỗi loại sự kiện, nhưng bạn có thể có nhiều event listeners."
const button = document.querySelector(".btn");
button.onclick = () => {
console.log("Xin chào!");
};
button.onclick = () => {
console.log("Bạn khỏe không?");
};Khi click vào button, chỉ sự kiện "Bạn khỏe không?" được log ra console.
Trong trường hợp như vậy, chúng ta cần sử dụng phương pháp addEventListener.
const button = document.querySelector(".btn");
button.addEventListener("click", event => {
console.log("Xin chào!");
});
button.addEventListener("click", event => {
console.log("Bạn khỏe không?");
});Sự kiện "Xin chào!" và "Bạn khỏe không?" sẽ được log ra console.
Nên sử dụng cách nào?
Phương pháp sử dụng nào phù hợp với bạn phụ thuộc vào trường hợp sử dụng của bạn.
Bạn có cần thêm nhiều sự kiện cho cùng một phần tử không? Trong tương lai, có cần thêm sự kiện cho phần tử đó không?
Đó là lý do tại sao addEventListener được khuyến nghị sử dụng.
