HTMLElement: loseinterest-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 loseinterest-Ereignis der HTMLElement-Schnittstelle wird auf dem Zielelement eines interest invoker ausgelöst, wenn das Interesse verloren geht. So kann als Reaktion darauf Code ausgeführt werden.
Dieses Ereignis kann normalerweise abgebrochen werden. Eine Ausnahme besteht, wenn der Benutzer die Esc-Taste drückt, um das Interesse an allen im Dokument enthaltenen interest invokers zu beenden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("loseinterest", (event) => { })
Alternativ können Sie ihn der Event-Handler-Property der Schnittstelle zuweisen:
onloseinterest = (event) => { }
Ereignistyp
Ein InterestEvent. Erbt von Event.
Beispiele
Grundlegende Verwendung von Ereignissen eines interest invoker
In diesem Beispiel verwenden wir die Ereignisse interest und loseinterest, um zu melden, wann Interesse an einem <button>-Element, das als interest invoker fungiert, gezeigt wird und wann es verloren geht. Dazu schreiben wir Meldungen in den Textinhalt des <p>-Zielelements.
HTML
Wir stellen die Beziehung zwischen dem <button>-Element als interest invoker und seinem <p>-Zielelement 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
Wir rufen eine Referenz auf das <button>-Element und über die Property interestForElement eine Referenz auf sein Zielelement ab.
const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;
Anschließend registrieren wir am Zielelement zwei Event-Listener für die Ereignisse interest und loseinterest.
- Wenn Interesse gezeigt wird, aktualisieren wir den Textinhalt des
<p>-Zielelements, um das Ereignis und das Element anzugeben, das es ausgelöst hat – in diesem Beispiel das<button>-Element. Beachten Sie, dass Sie über die Propertysourcedes Ereignisobjekts eine Referenz auf den interest invoker erhalten können. - Wenn das Interesse verloren geht, aktualisieren wir den Absatztext, um anzugeben, dass kein Interesse mehr gezeigt wird.
target.addEventListener("interest", (e) => {
target.textContent = `Interest being shown via the ${e.source.tagName} element.`;
});
target.addEventListener("loseinterest", () => {
target.textContent = `Interest lost.`;
});
Ergebnis
Das Beispiel wird wie folgt dargestellt:
Zeigen und beenden Sie das Interesse am Button (beispielsweise indem Sie den Mauszeiger darüber bewegen oder ihn fokussieren), um zu sehen, wie sich der Text des <p>-Elements ändert.