HTMLElement: sự kiện interest
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Sự kiện interest của giao diện HTMLElement được kích hoạt trên phần tử đích của trình gọi quan tâm khi sự quan tâm được thể hiện, cho phép chạy mã để phản hồi.
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("interest", (event) => { })
oninterest = (event) => { }
Loại sự kiện
Một InterestEvent. Kế thừa từ Event.
Ví dụ
Sử dụng cơ bản sự kiện trình gọi quan tâm
Trong ví dụ này, chúng ta dùng các sự kiện interest và loseinterest để báo cáo khi sự quan tâm được thể hiện và mất đi trên phần tử <button> đóng vai trò là trình gọi quan tâm. Chúng ta làm điều này bằng cách in thông điệp vào nội dung văn bản của phần tử <p> đích.
HTML
Chúng ta thiết lập mối quan hệ giữa phần tử <button> trình gọi quan tâm và phần tử <p> đích bằng cách đặt giá trị của thuộc tính interestfor của <button> bằng với id của <p>.
<button href="#" interestfor="mytarget">Interest invoker</button>
<p id="mytarget">No interest being shown currently.</p>
JavaScript
Chúng ta lấy tham chiếu đến phần tử <button> và phần tử đích thông qua thuộc tính interestForElement.
const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;
Sau đó, chúng ta đặt hai trình lắng nghe sự kiện trên phần tử đích, cho các sự kiện interest và loseinterest.
- Khi sự quan tâm được thể hiện, chúng ta cập nhật nội dung văn bản của phần tử
<p>đích để báo cáo sự kiện và bao gồm phần tử kích hoạt nó; trong ví dụ này, đó là phần tử<button>. Lưu ý cách bạn có thể lấy tham chiếu đến trình gọi quan tâm thông qua thuộc tínhsourcecủa đối tượng sự kiện. - Khi sự quan tâm bị mất, chúng ta cập nhật văn bản đoạn văn để báo cáo rằng sự quan tâm không còn được thể hiện.
target.addEventListener("interest", (e) => {
target.textContent = `Interest shown via the ${e.source.tagName} element.`;
});
target.addEventListener("loseinterest", () => {
target.textContent = `Interest lost.`;
});
Kết quả
Ví dụ hiển thị như sau:
Hãy thử thể hiện và mất quan tâm vào nút (ví dụ: bằng cách di chuột qua hoặc tiêu điểm vào nó) để xem cách văn bản <p> thay đổi.