HTMLElement: sự kiện toggle
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Sự kiện toggle của giao diện HTMLElement kích hoạt trên phần tử popover, phần tử <dialog> hoặc phần tử <details> ngay sau khi nó được hiển thị hoặc ẩn.
- Nếu phần tử đang chuyển từ ẩn sang hiển thị, thuộc tính
event.oldStatesẽ được đặt thànhclosedvà thuộc tínhevent.newStatesẽ được đặt thànhopen. - Nếu phần tử đang chuyển từ hiển thị sang ẩn, thì
event.oldStatesẽ làopenvàevent.newStatesẽ làclosed.
Sự kiện này không thể hủy.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("toggle", (event) => { })
ontoggle = (event) => { }
Loại sự kiện
Một ToggleEvent. Kế thừa từ Event.
Ví dụ
Ví dụ mã bên dưới mô tả cách sự kiện toggle có thể được dùng với popover.
Mã tương tự cũng có thể được dùng cho phần tử <dialog> hoặc <details> theo cùng cách.
Ví dụ cơ bản
Ví dụ này cho thấy cách lắng nghe sự kiện toggle và ghi nhật ký kết quả.
HTML
HTML bao gồm một popover và một nút để bật/tắt nó.
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
JavaScript
Đoạn mã thêm trình lắng nghe sự kiện cho toggle và ghi nhật ký trạng thái.
const popover = document.getElementById("mypopover");
popover.addEventListener("toggle", (event) => {
if (event.newState === "open") {
log("Popover has been shown");
} else {
log("Popover has been hidden");
}
});
Kết quả
Ghi chú về hợp nhất sự kiện toggle
Nếu nhiều sự kiện toggle được kích hoạt trước khi vòng lặp sự kiện có cơ hội chạy, chỉ có một sự kiện duy nhất sẽ được kích hoạt.
Điều này được gọi là "hợp nhất sự kiện".
Ví dụ:
popover.addEventListener("toggle", () => {
// …
});
popover.showPopover();
popover.hidePopover();
// `toggle` only fires once
Các ví dụ khác
- Ví dụ Mở hộp thoại modal trong
HTMLDialogElement
Thông số kỹ thuật
| Specification |
|---|
| HTML # event-toggle |
Tương thích trình duyệt
Xem thêm
- Thuộc tính HTML toàn cục
popover - API Popover
- Sự kiện liên quan:
beforetoggle