HTMLElement: interest event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.
Das interest-Ereignis des HTMLElement-Interfaces wird auf dem Ziel-Element eines interest invoker ausgelöst, wenn Interesse gezeigt wird, und ermöglicht es, Code als Reaktion auszuführen.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("interest", (event) => { })
oninterest = (event) => { }
Ereignistyp
Ein InterestEvent. Erbt von Event.
Beispiele
Grundlegende Nutzung von interest invoker-Ereignissen
In diesem Beispiel verwenden wir die interest- und loseinterest-Ereignisse, um zu berichten, wenn Interesse auf einem <button>-Element gezeigt und verloren wird, das als interest invoker fungiert. Wir tun dies, indem wir Nachrichten in die Textinhalte des Ziel-<p>-Elements drucken.
HTML
Wir richten die Beziehung zwischen dem <button>-Element interest invoker und seinem Ziel-<p>-Element ein, indem wir den Wert des interestfor-Attributs des <button>-Elements gleich der id des <p>-Elements setzen.
<button href="#" interestfor="mytarget">Interest invoker</button>
<p id="mytarget">No interest being shown currently.</p>
JavaScript
Wir erhalten eine Referenz auf das <button>-Element und sein Ziel-Element über die interestForElement-Eigenschaft.
const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;
Dann setzen wir zwei Ereignislistener auf das Ziel-Element, für die interest- und loseinterest-Ereignisse.
- Wenn Interesse gezeigt wird, aktualisieren wir den Textinhalt des Ziel-
<p>-Elements, um das Ereignis zu melden und das auslösende Element einzuschließen; in diesem Beispiel ist das das<button>-Element. Beachten Sie, wie Sie über diesource-Eigenschaft des Ereignisobjekts eine Referenz auf den interest invoker erhalten können. - Wenn Interesse verloren geht, aktualisieren wir den Absatztext, um zu melden, dass Interesse nicht mehr gezeigt wird.
target.addEventListener("interest", (e) => {
target.textContent = `Interest shown via the ${e.source.tagName} element.`;
});
target.addEventListener("loseinterest", () => {
target.textContent = `Interest lost.`;
});
Ergebnis
Das Beispiel wird folgendermaßen dargestellt:
Versuchen Sie, Interesse zu zeigen und zu verlieren (zum Beispiel durch Überfahren oder Fokussieren der Schaltfläche), um zu sehen, wie sich der <p>-Text ändert.