Tìm hiểu cách dùng sự kiện (event) trong javascript - https://final-blade.com

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.

Tóm Tắt

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 người dùng nào đó trên website thì khi đó một sự kiện được kích hoạt theo hành vi này như hành vi 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.

Bạn đang đọc: Tìm hiểu cách dùng sự kiện (event) trong javascript – https://final-blade.com

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

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







    Events




    

    Try to change me .

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 website khi lần đầu render 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ị biến hóa .

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.

Xem thêm: Hướng dẫn cách mở khóa iPhone bị vô hiệu hóa (iPhone is disabled)

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 tất cả chúng ta không sử dụng dấu “ ( ) ” vì tất cả chúng ta không gọi hàm này mà chỉ truyền một tham chiếu liên kết đến giải quyết và 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 dưỡng hơn, tuy nhiên nó sống sót một khuyết điệm là tất cả chúng ta không hề 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 ở đầu cuối đượ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 tin như hình sau : 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 pháp tối ưu nhất để gán những xử lý sự kiện, tổng hợp được những ư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

Xem thêm: Cách đổi pass modem Wifi trên máy tính, laptop dễ dàng, nhanh chóng

// 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

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com