Các sự kiện HTML là "những thứ" xảy ra với các yếu tố HTML."things" that happen to HTML elements.
Khi JavaScript được sử dụng trong các trang HTML, JavaScript có thể "phản ứng" trên các sự kiện này. "react" on these events.
Sự kiện HTML
Một sự kiện HTML có thể là điều mà trình duyệt thực hiện hoặc một cái gì đó mà người dùng làm.
Dưới đây là một số ví dụ về các sự kiện HTML:
- Một trang web HTML đã tải xong
- Trường đầu vào HTML đã được thay đổi
- Một nút HTML đã được nhấp vào
Thông thường, khi các sự kiện xảy ra, bạn có thể muốn làm điều gì đó.
JavaScript cho phép bạn thực thi mã khi phát hiện các sự kiện.
HTML cho phép các thuộc tính xử lý sự kiện, với mã JavaScript, được thêm vào các phần tử HTML.with JavaScript code, to be added to HTML elements.
Với các trích dẫn đơn:
Với dấu ngoặc kép:
Với dấu ngoặc kép:
Trong ví dụ sau, thuộc tính title
[có mã], được thêm vào phần tử
:
Thí dụ
Thời gian là?
Hãy tự mình thử »
Trong ví dụ trên, mã JavaScript thay đổi nội dung của phần tử với id = "demo".
Trong ví dụ sau, thuộc tính title
[có mã], được thêm vào phần tử
:
Thí dụ
Thời gian là?
Hãy tự mình thử »
Trong ví dụ trên, mã JavaScript thay đổi nội dung của phần tử với id = "demo".
Trong ví dụ tiếp theo, mã thay đổi nội dung của phần tử của chính nó [sử dụng this.innerHTML
]:
Dưới đây là danh sách một số sự kiện HTML phổ biến: | Biến cố |
Sự mô tả | onchange |
Một phần tử HTML đã được thay đổi | trong một cái nhấp chuột |
Người dùng nhấp vào phần tử HTML | onmouseOver |
Người dùng di chuyển chuột qua phần tử HTML | onmouseOut |
Người dùng di chuyển chuột ra khỏi phần tử HTML | Onkeydown |
Người dùng nhấn phím bàn phím
đang tải
Trình duyệt đã hoàn thành tải trang
- Danh sách dài hơn nhiều: W3Schools tham khảo JavaScript HTML DOM.
- Trình xử lý sự kiện JavaScript
- Trình xử lý sự kiện có thể được sử dụng để xử lý và xác minh đầu vào của người dùng, hành động của người dùng và các hành động trình duyệt:
- Những việc nên được thực hiện mỗi khi một trang tải
- Những việc nên được thực hiện khi trang được đóng
Hành động nên được thực hiện khi người dùng nhấp vào nút
- Nội dung cần được xác minh khi người dùng nhập dữ liệu
- Và nhiều hơn nữa ...
- Nhiều phương pháp khác nhau có thể được sử dụng để cho phép JavaScript hoạt động với các sự kiện:
- Thuộc tính sự kiện HTML có thể thực thi mã JavaScript trực tiếp
- Những việc nên được thực hiện khi trang được đóng
Hành động nên được thực hiện khi người dùng nhấp vào nút
Nội dung cần được xác minh khi người dùng nhập dữ liệu
Exercise:
Và nhiều hơn nữa ...
Click me.
Nhiều phương pháp khác nhau có thể được sử dụng để cho phép JavaScript hoạt động với các sự kiện:
Các sự kiện là tín hiệu được kích hoạt bên trong cửa sổ trình duyệt để thông báo cho các thay đổi trong môi trường trình duyệt hoặc hệ điều hành. Các lập trình viên có thể tạo mã xử lý sự kiện sẽ chạy khi một sự kiện bắn, cho phép các trang web phản hồi một cách thích hợp để thay đổi. Trang này cung cấp một "lời nhắc" rất ngắn gọn về cách làm việc với các sự kiện và người xử lý sự kiện. Thay vào đó, các nhà phát triển mới nên đọc Giới thiệu về các sự kiện. Các sự kiện được ghi lại trong và/hoặc dưới các trang cho các đối tượng JavaScript phát ra chúng. Ví dụ: để tìm hiểu các sự kiện được kích hoạt trên cửa sổ trình duyệt hoặc tài liệu hiện tại, hãy xem các phần sự kiện trong Các sự kiện có sẵn là gì?
Window
và
0.const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
Bạn có thể sử dụng tham chiếu sự kiện để tìm hiểu những sự kiện hỏa hoạn của JavaScript nào cho các API cụ thể, ví dụ: Hoạt hình, phương tiện truyền thông, và như vậy.
Đăng ký xử lý sự kiện
Có hai cách tiếp cận được đề xuất để đăng ký xử lý. Mã xử lý sự kiện có thể được thực hiện để chạy khi một sự kiện được kích hoạt bằng cách gán nó cho thuộc tính Onevent tương ứng của phần tử đích hoặc bằng cách đăng ký trình xử lý làm trình nghe cho phần tử bằng phương thức
const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
1. Trong cả hai trường hợp, trình xử lý sẽ nhận được một đối tượng phù hợp với giao diện const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
2 [hoặc giao diện dẫn xuất]. Sự khác biệt chính là nhiều trình xử lý sự kiện có thể được thêm [hoặc xóa] bằng các phương thức người nghe sự kiện.CẢNH BÁO: Cách tiếp cận thứ ba để thiết lập trình xử lý sự kiện bằng cách sử dụng các thuộc tính HTML Onevent không được khuyến khích! Chúng thổi phồng đánh dấu và làm cho nó ít đọc hơn và khó gỡ lỗi hơn. Để biết thêm thông tin, xem Trình xử lý sự kiện nội tuyến. A third approach for setting event handlers using HTML onevent attributes is not recommended! They inflate the markup and make it less readable and harder to debug. For more information see Inline event handlers.
Sử dụng các thuộc tính Onevent
Theo quy ước, các đối tượng JavaScript rằng các sự kiện hỏa hoạn có các thuộc tính "Onevent" tương ứng [được đặt tên bằng tiền tố "ON" với tên của sự kiện]. Các thuộc tính này được gọi để chạy mã xử lý liên kết khi sự kiện được kích hoạt và cũng có thể được gọi trực tiếp bởi mã của riêng bạn.
Để đặt mã xử lý sự kiện, bạn chỉ có thể gán nó cho thuộc tính Onevent thích hợp. Chỉ có một người xử lý sự kiện có thể được chỉ định cho mọi sự kiện trong một yếu tố. Nếu cần, người xử lý có thể được thay thế bằng cách gán một chức năng khác cho cùng một thuộc tính.
Dưới đây chúng tôi chỉ ra cách đặt chức năng
const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
3 đơn giản cho sự kiện const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
4 bằng thuộc tính title
.const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
Lưu ý rằng một đối tượng đại diện cho sự kiện được truyền như là đối số đầu tiên cho trình xử lý sự kiện. Đối tượng sự kiện này thực hiện hoặc có nguồn gốc từ giao diện
const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
2.EventTarget.addEventListener
Cách linh hoạt nhất để đặt trình xử lý sự kiện trên một phần tử là sử dụng phương thức
const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
7. Cách tiếp cận này cho phép nhiều người nghe được gán cho một yếu tố và để người nghe bị xóa nếu cần [sử dụng const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
8].Lưu ý: Ví dụ, khả năng thêm và xóa trình xử lý sự kiện cho phép bạn, có cùng một nút thực hiện các hành động khác nhau trong các trường hợp khác nhau. Ngoài ra, trong các chương trình phức tạp hơn, làm sạch các trình xử lý sự kiện cũ/không sử dụng có thể cải thiện hiệu quả. The ability to add and remove event handlers allows you to, for example, have the same button performing different actions in different circumstances. In addition, in more complex programs cleaning up old/unused event handlers can improve efficiency.
Dưới đây chúng tôi chỉ ra làm thế nào một hàm
const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
3 đơn giản có thể được đặt thành trình xử lý người nghe/sự kiện cho sự kiện const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
4 [bạn có thể sử dụng chức năng Lambda thay vì hàm được đặt tên nếu muốn]. Lưu ý một lần nữa rằng sự kiện được thông qua như là đối số đầu tiên cho người xử lý sự kiện.const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn.addEventListener['click', greet];
Phương pháp cũng có thể lấy các đối số/tùy chọn bổ sung để kiểm soát các khía cạnh của cách các sự kiện được nắm bắt và loại bỏ. Thông tin thêm có thể được tìm thấy trên trang tham chiếu
const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
7.Sử dụng tín hiệu hủy bỏ
Một tính năng người nghe sự kiện đáng chú ý là khả năng sử dụng tín hiệu hủy bỏ để làm sạch nhiều trình xử lý sự kiện cùng một lúc.
Điều này được thực hiện bằng cách chuyển cùng một
const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn.addEventListener['click', greet];
2 cho cuộc gọi const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn. title = greet;
1 cho tất cả các trình xử lý sự kiện mà bạn muốn có thể loại bỏ cùng nhau. Sau đó, bạn có thể gọi const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn.addEventListener['click', greet];
4 trên bộ điều khiển sở hữu const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn.addEventListener['click', greet];
2 và nó sẽ xóa tất cả các trình xử lý sự kiện được thêm vào tín hiệu đó. Ví dụ: để thêm một trình xử lý sự kiện mà chúng ta có thể xóa bằng const btn = document.querySelector['button'];
function greet[event] {
console.log['greet:', event]
}
btn.addEventListener['click', greet];
2:const controller = new AbortController[];
btn.addEventListener['click', [event] => {
console.log['greet:', event];
}, { signal: controller.signal }]; // pass an AbortSignal to this handler
Sau đó, trình xử lý sự kiện được tạo bởi mã ở trên có thể được xóa như thế này:
controller.abort[]; // removes any/all event handlers associated with this controller