HTMLElement: interest-Ereignis
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
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 der HTMLElement-Schnittstelle wird auf dem Zielelement eines Interest Invokers ausgelöst, wenn Interesse gezeigt wird. So kann als Reaktion darauf Code ausgeführt werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("interest", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
oninterest = (event) => { }
Ereignistyp
Ein InterestEvent. Erbt von Event.
Beispiele
Grundlegende Verwendung von Ereignissen eines Interest Invokers
In diesem Beispiel verwenden wir die Ereignisse interest und loseinterest, um zu melden, wann Interesse an einem <button>-Element, das als Interest Invoker dient, gezeigt wird und wann es endet. Dazu schreiben wir Meldungen in den Textinhalt des als Ziel dienenden <p>-Elements.
HTML
Wir stellen die Beziehung zwischen dem <button>-Element als Interest Invoker und seinem Ziel, dem <p>-Element, her, indem wir den Wert des interestfor-Attributs des <button>-Elements auf die id des <p>-Elements setzen.
<button href="#" interestfor="mytarget">Interest invoker</button>
<p id="mytarget">No interest being shown currently.</p>
JavaScript
Über die interestForElement-Eigenschaft erhalten wir eine Referenz auf das <button>-Element und sein Zielelement.
const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;
Anschließend fügen wir dem Zielelement zwei Event-Listener hinzu: einen für interest und einen für loseinterest.
- Wenn Interesse gezeigt wird, aktualisieren wir den Textinhalt des als Ziel dienenden
<p>-Elements, um das Ereignis und das Element zu nennen, das es ausgelöst hat – in diesem Beispiel das<button>-Element. Beachten Sie, dass Sie über diesource-Eigenschaft des Ereignisobjekts eine Referenz auf den Interest Invoker erhalten können. - Wenn das Interesse endet, aktualisieren wir den Text des Absatzes, um zu melden, dass kein Interesse 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 wie folgt dargestellt:
Zeigen Sie Interesse an der Schaltfläche und beenden Sie es wieder (beispielsweise indem Sie den Mauszeiger darüber bewegen oder die Schaltfläche fokussieren), um zu sehen, wie sich der Text des <p>-Elements ändert.