HTMLElement: loseinterest-Ereignis
Das loseinterest-Ereignis der HTMLElement-Schnittstelle wird auf dem Zielelement eines Interest Invokers ausgelöst, wenn das Interesse verloren geht, wodurch Code als Reaktion ausgeführt werden kann.
Dieses Ereignis ist normalerweise stornierbar, außer wenn der Benutzer die Esc-Taste drückt, um das Interesse an allen Interest Invokern im Dokument zu verlieren.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("loseinterest", (event) => { })
onloseinterest = (event) => { }
Ereignistyp
Ein InterestEvent. Erbt von Event.
Beispiele
Grundlegende Nutzung von Interest Invoker-Ereignissen
In diesem Beispiel nutzen wir die interest- und loseinterest-Ereignisse, um zu berichten, wann Interesse an einem <button>-Element, das als Interest Invoker agiert, gezeigt und verloren wird. Dies tun wir, indem wir Nachrichten in den Textinhalt des Ziel-<p>-Elements drucken.
HTML
Wir richten die Beziehung zwischen dem <button>-Element als Interest Invoker und seinem Ziel-<p>-Element ein, indem wir den Wert des interestfor-Attributs des <button>-Elements gleich dem id-Attribut 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 Zielelement über die interestForElement-Eigenschaft.
const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;
Wir setzen dann zwei Ereignislistener auf das Zielelement 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 Element anzugeben, das es ausgelöst hat; 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 being shown via the ${e.source.tagName} element.`;
});
target.addEventListener("loseinterest", () => {
target.textContent = `Interest lost.`;
});
Ergebnis
Das Beispiel rendert sich wie folgt:
Versuchen Sie, Interesse an dem Button zu zeigen und zu verlieren (zum Beispiel durch Hover oder Fokus), um zu sehen, wie sich der <p>-Text ändert.