HTMLElement: loseinterest Ereignis

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 loseinterest-Ereignis der HTMLElement-Schnittstelle wird auf dem Ziel-Element eines interest invoker ausgelöst, wenn das Interesse verloren geht, wodurch Code als Reaktion ausgeführt werden kann.

Dieses Ereignis ist normalerweise abbrechbar, es sei denn, der Benutzer drückt die Esc-Taste, um das Interesse an allen interest invokern im Dokument zu verlieren.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandlereigenschaft.

addEventListener("loseinterest", (event) => { })

onloseinterest = (event) => { }

Ereignistyp

Ein InterestEvent. Erbt von Event.

Beispiele

Grundlegende Verwendung von interest invoker Ereignissen

In diesem Beispiel verwenden wir die interest- und loseinterest-Ereignisse, um zu berichten, wann Interesse an einem <button>-Element, das als interest invoker fungiert, gezeigt und verloren wird. Wir tun dies, indem wir Nachrichten in den Textinhalt 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.

html

<button href="#" interestfor="mytarget">Interest invoker</button>
<p id="mytarget">No interest being shown currently.</p>

JavaScript

Wir erhalten eine Referenz zum <button>-Element und dessen Ziel-Element über die interestForElement-Eigenschaft.

const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;

Dann setzen wir zwei Ereignis-Listener 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 berichten und das Element einzuschließen, das es ausgelöst hat; in diesem Beispiel ist das das <button>-Element. Beachten Sie, wie Sie über die source-Eigenschaft des Ereignisobjekts eine Referenz zum interest invoker erhalten können.
Wenn Interesse verloren geht, aktualisieren wir den Absatztext, um zu berichten, 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 gerendert:

Versuchen Sie, Interesse am Button zu zeigen und es wieder zu verlieren (zum Beispiel durch Hover oder Fokus), um zu sehen, wie sich der <p>-Text ändert.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden