Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu các cách khác nhau để thực hiện xử lý sự kiện trong JavaScript.: in this tutorial, you will learn the various ways to perform event handling in JavaScript.
Khi một sự kiện xảy ra, bạn có thể tạo một trình xử lý sự kiện là một đoạn mã sẽ thực thi để đáp ứng sự kiện đó. Một người xử lý sự kiện còn được biết đến như một người nghe sự kiện. Nó lắng nghe sự kiện và ứng phó tương ứng với các vụ cháy sự kiện.
Người nghe sự kiện là một hàm có tên rõ ràng nếu nó có thể nối lại hoặc một hàm ẩn danh trong trường hợp nó được sử dụng một lần.
Một sự kiện có thể được xử lý bởi một hoặc nhiều trình xử lý sự kiện. Nếu một sự kiện có nhiều trình xử lý sự kiện, tất cả các trình xử lý sự kiện sẽ được thực hiện khi sự kiện được sa thải.
Có ba cách để gán trình xử lý sự kiện.
1] Thuộc tính xử lý sự kiện HTML
Trình xử lý sự kiện thường có tên bắt đầu bằng
4, ví dụ, trình xử lý sự kiện cho sự kiệnCode language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
5 làCode language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
6.Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
Để gán một trình xử lý sự kiện cho một sự kiện được liên kết với phần tử HTML, bạn có thể sử dụng thuộc tính HTML với tên của trình xử lý sự kiện. Ví dụ: để thực hiện một số mã khi nhấp vào nút, bạn sử dụng các ứng dụng sau:
Code language: HTML, XML [xml]
Trong trường hợp này, khi nút được nhấp, hộp cảnh báo được hiển thị.
Khi bạn gán mã JavaScript làm giá trị của thuộc tính
6, bạn cần thoát các ký tự HTML như ampersand [Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
8], trích dẫn kép [Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
9], ít hơn [Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
0], v.v.Code language: HTML, XML [xml]
Một trình xử lý sự kiện được xác định trong HTML có thể gọi một hàm được xác định trong tập lệnh. Ví dụ:
Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
Trong ví dụ này, nút gọi hàm
1 khi được nhấp.
Code language: HTML, XML [xml]
1 là một hàm được xác định trong một phần tửCode language: HTML, XML [xml]
3 riêng biệt và có thể được đặt trong một tệp JavaScript bên ngoài.Code language: HTML, XML [xml]
Ghi chú quan trọng
Sau đây là một số điểm quan trọng khi bạn sử dụng Trình xử lý sự kiện làm thuộc tính của phần tử HTML:
Đầu tiên, mã trong bộ xử lý sự kiện có thể truy cập đối tượng
4 mà không cần xác định rõ ràng:Code language: HTML, XML [xml]
Code language: HTML, XML [xml]
Thứ hai, giá trị
5 bên trong trình xử lý sự kiện tương đương với phần tử mục tiêu của sự kiện:Code language: HTML, XML [xml]
Code language: HTML, XML [xml]
Thứ ba, người xử lý sự kiện có thể truy cập các thuộc tính của phần tử, ví dụ:
Code language: HTML, XML [xml]
Nhược điểm của việc sử dụng các thuộc tính xử lý sự kiện HTML
Việc gán trình xử lý sự kiện bằng cách sử dụng các thuộc tính xử lý sự kiện HTML được coi là thực hành xấu và nên tránh càng nhiều càng tốt vì những lý do sau:
Đầu tiên, mã xử lý sự kiện được trộn với mã HTML, điều này sẽ làm cho mã khó khăn hơn để duy trì và mở rộng.
Thứ hai, đó là một vấn đề thời gian. Nếu phần tử được tải đầy đủ trước mã JavaScript, người dùng có thể bắt đầu tương tác với phần tử trên trang web sẽ gây ra lỗi.
Ví dụ: giả sử rằng hàm
1 sau đây được xác định trong tệp JavaScript bên ngoài:Code language: HTML, XML [xml]
Code language: HTML, XML [xml]
Và khi trang được tải đầy đủ và JavaScript chưa được tải, hàm
1 không được xác định. Nếu người dùng nhấp vào nút tại thời điểm này, sẽ xảy ra lỗi.
Code language: HTML, XML [xml]
2] DOM Cấp độ 0 Trình xử lý sự kiện
Mỗi phần tử có các thuộc tính xử lý sự kiện như
6. Để gán trình xử lý sự kiện, bạn đặt thuộc tính thành một hàm như được hiển thị trong ví dụ:Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
Code language: JavaScript [javascript]
let btn = document.querySelector['#btn']; btn. title = function[] { alert['Clicked!']; };
Trong trường hợp này, hàm ẩn danh trở thành phương pháp của phần tử
9. Do đó, giá trịCode language: HTML, XML [xml]
5 tương đương với phần tử. Và bạn có thể truy cập các thuộc tính của phần tử bên trong trình xử lý sự kiện:Code language: HTML, XML [xml]
Code language: JavaScript [javascript]
let btn = document.querySelector['#btn']; btn. title = function[] { alert[this.id]; };
Output:
btn
Bằng cách sử dụng giá trị
5 bên trong trình xử lý sự kiện, bạn có thể truy cập các thuộc tính và phương thức của phần tử.Code language: HTML, XML [xml]
Để xóa trình xử lý sự kiện, bạn đặt giá trị của thuộc tính Trình xử lý sự kiện thành
2:Code language: HTML, XML [xml]
Code language: JavaScript [javascript]
btn. title = null;
Các trình xử lý sự kiện cấp độ DOM 0 vẫn đang được sử dụng rộng rãi vì sự đơn giản và hỗ trợ trình duyệt chéo của nó.
3] DOM Cấp độ 2 Người xử lý sự kiện
Người xử lý sự kiện cấp 2 DOM cung cấp hai phương pháp chính để xử lý người nghe sự kiện đăng ký/hủy đăng ký:
3 - Đăng ký một người xử lý sự kiện
Code language: HTML, XML [xml]
4 - Xóa người xử lý sự kiện
Code language: HTML, XML [xml]
Các phương pháp này có sẵn trong tất cả các nút dom.
Phương pháp
Code language: HTML, XML [xml]
3
Phương pháp
3 chấp nhận ba đối số: tên sự kiện, hàm xử lý sự kiện và giá trị boolean hướng dẫn phương thức gọi trình xử lý sự kiện trong giai đoạn bắt giữ [Code language: HTML, XML [xml]
7] hoặc trong giai đoạn bong bóng [Code language: HTML, XML [xml]
8]. Ví dụ:Code language: HTML, XML [xml]
0Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
Có thể thêm nhiều trình xử lý sự kiện để xử lý một sự kiện, như thế này:
1Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
Phương pháp
Code language: HTML, XML [xml]
4
4 loại bỏ một trình nghe sự kiện đã được thêm vào thông quaCode language: HTML, XML [xml]
3. Tuy nhiên, bạn cần chuyển các đối số tương tự như đã được chuyển choCode language: HTML, XML [xml]
3. Ví dụ:Code language: HTML, XML [xml]
2Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
Sử dụng trình nghe sự kiện ẩn danh như sau đây sẽ không hoạt động:
3Code language: HTML, XML [xml]
function showAlert[] { alert['Clicked!']; }
Bản tóm tắt
- Có ba cách để gán một trình xử lý sự kiện: thuộc tính HTML Event Handler, thuộc tính Trình xử lý sự kiện phần tử và
3.
Code language: HTML, XML [xml] - Chỉ nên tránh một trình xử lý sự kiện thông qua thuộc tính xử lý sự kiện HTML.
Hướng dẫn này có hữu ích không?