Sự kiện hay Event trên website là các hành động diễn ra trong trình duyệt có thể được khởi tạo bởi chính người dùng hoặc chính trình duyệt đó. Dưới đây là một số ví dụ về các sự kiện phổ biến có thể xảy ra trên trang web:

  • Sự kiện tải hoàn toàn 1 trang web (load)
  • Sự kiện click một đối tượng nào đó
  • Người dùng rê chuột trên một đối tượng nào đó.
  • Người dùng gõ một phím nào đó trên bàn phím gây ra ảnh hưởng tới một đối tượng trên trang web.
  • Người dùng gửi một biểu mẫu form

Bằng cách mã hóa các sự kiện bằng ngôn ngữ Javascript, các lập trình viên có thể sử lý các phản hồi sự kiện từ người dùng. Bài viết này cung cấp cho bạn một số kiến thức cơ bản về vấn đề xử lý sự kiện (event) trong javascript.

Phân biệt Event handlers và Event Listeners

Khi người dùng click hoặc tương tác với một đối tượng nào đó trên trang web thì khi đó một sự kiện được kích hoạt theo hành động này  như hành động click phía trên được gọi là sự kiện click chuột.

Event handlers trong javascript là một hoặc nhiều hàm xử lý sự kiện được gắn kết với event khi nó được kích hoạt. Các functions này phản hồi lại các tương tác cho người dùng các kết quả được lập trinh sẵn theo ý định của lập trình viên.

Event Listeners trong javascript là môt giao diện kết nối được gắn vào một hay nhiềuphần tử, cho phép các phần tử cụ thể đó chờ và “nghe” cho sự kiện đã cho kích hoạt.

Sự kiện trong Javascript

Sự kiện trong Javascript

Có ba cách để gán một sự kiện cho đối tượng trên trang web:

  • Attach inline: gán trực tiếp vào ngay trong thuộc tính của phần tử bằng chỉ thị html
  • Attach via propeties: gán thông qua các thuộc tính Dom của đối tượng.
  • Attach via listeners: gán thông qua hàm listenner

Gán trực tiếp event handlers qua thuộc tính của phần tử bằng chỉ thị Html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Events</title>
</head>

<body>

    <button onclick="changeText()">Click me</button>

    <p>Try to change me.</p>

</body>

<script>
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an inline event handler.";
}
</script>

</html>

Như ví dụ trên hàm changeText() được gán trực tiếp cho đối tượng button qua thuộc tính onClick=”changText()”. Do đó khi người dùng click vào nút này nội dung của đối tượng p sẽ đổi thành “I changed because of an inline event handler.”

Nội dung trang web khi lần đầu render

Minh họa sự kiện click trong javascript

Minh họa sự kiện click trong javascript

Khi người dùng click vào nút “Click me” — sự kiện click được kích hoạt và nội dung đoạn text bị thay đổi.

Minh họa sự kiện click trong javascript

Minh họa sự kiện click trong javascript

Cách thức thêm sự kiện cho đối tượng này thường được sử dụng để minh họa cho các ví dụ về events trong javascript. Nó không được sử dụng nhiều trong các ứng dụng được publish vì vấn đề khó bảo trì và thay đổi cấu trúc tập tin html.

Gán event handlers qua thông qua thuộc tính đối tượng

Xem lại cách gán sự kiện click ở ví dụ trên bằng cách sau:

// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event handler property.";
}

// Add event handler as a property of the button element
const button = document.querySelector('button');
button.onclick = changeText;

Lưu ý:  Thuôc tính gắn kết sự kiện không tuân theo quy ước cú pháp đặt tên camelCase mà hầu hết mã JavaScript tuân thủ. Chú ý rằng rằng mã là onclick mà không phải là onClick.

Ở ví dụ này thuộc tính onclick được gán một tham chiếu đến hàm changeText(). Lưu ý rằng ở đây chúng ta không sử dụng dấu “()” vì chúng ta không gọi hàm này mà chỉ truyền một tham chiếu kết nối đến xử lý của hàm.

Cách thức gán xử lý sự kiện này có ưu điểm hơn so với cách trên là tách biệt mã javascript và mã html giúp ứng dụng dễ bảo trì hơn, tuy nhiên nó tồn tại một khuyết điệm là chúng ta không thể gán được nhiều functions cho nó.

const p = document.querySelector('p');
const button = document.querySelector('button');

const changeText = () => {
    p.textContent = "Will I change?";
}

const alertText = () => {
    alert('Will I alert?');
}

// Events can be overwritten
button.onclick = changeText;
button.onclick = alertText;

Với ví dụ trên khi click vào nút “click me” chỉ có hàm “alertText()” là được thực thi vì nó là tham chiếu cuối cùng được gán và thuộc tích onclick chỉ nhận duy nhất một giá trị. Nên khi click vào button nó sẽ hiển thị hộp thông báo như hình sau:

Hiển thị hộp thông báo khi click vào button

Hiển thị hộp thông báo khi click vào button

Gán sự kiện bằng hàm addEventListener()

Đây là phương thức tối ưu nhất để gán các xử lý sự kiện, tổng hợp được các ưu điểm:

  • Tách biệt mã html với mã xử lý sự kiện.
  • Dễ dàng bảo trì và sửa đổi khi cần thiết.
  • Có thể uyển chuyển thêm nhiều các tham chiếu đến hàm xử lý sự kiện

Cùng với ví dụ trên chúng ta cùng tìm hiểu cách thức viết mã cho cách gán sự kiên click cho đối tượng bằng javascript

// Function to modify the text content of the paragraph
const changeText = () => {
    const p = document.querySelector('p');

    p.textContent = "I changed because of an event listener.";
}

// Listen for click event
const button = document.querySelector('button');
button.addEventListener('click', changeText);

Lưu ý rằng với hai phương thức đầu tiên, một sự kiện nhấp chuột được gọi là onclick, nhưng với các trình nghe sự kiện, nó được gọi là click. Mọi trình xử lý sự kiện đều giảm ontừ từ. Trong phần tiếp theo, chúng ta sẽ xem xét thêm các ví dụ về các loại sự kiện khác.

Sử dụng removeEventListener()hàm để xóa một hoặc tất cả các sự kiện khỏi một phần tử.

button.removeEventListener('click', alertText);

Tham khảo bài viết tại: https://www.digitalocean.com/community/tutorials/understanding-events-in-javascript

About the author

Kevin Dang

Hey there! My name is Kevin Dang, I am website, software, mobile app develop, web admin system. Expert living in Hồ Chí Minh (Việt Nam). I am very interested in digital marketing with: SEO, Facebook, Google Ads ... This blog is where I will share the experiences, techniques and knowledge I have learned.