HTMLElement: interest-Ereignis
Das interest-Ereignis der HTMLElement-Schnittstelle wird auf einem interest invoker-Zielelement ausgelöst, wenn Interesse gezeigt wird, wodurch es möglich ist, Code in Reaktion darauf auszuführen.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-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 Ereignisse interest und loseinterest, um zu melden, wann Interesse an einem <button>-Element gezeigt und verloren wird, das als interest invoker fungiert. Wir tun dies, indem wir Nachrichten in den Textinhalt des Ziel-<p>-Elements einfügen.
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 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 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 Ereignis-Listener auf das Zielelement, für die Ereignisse interest und loseinterest.
- 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 eine Referenz auf den interest invoker über diesource-Eigenschaft des Ereignisobjekts erhalten können. - Wenn Interesse verloren geht, 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:
Versuchen Sie, Interesse an dem Button zu zeigen und zu verlieren (zum Beispiel durch Hovern oder Fokussieren), um zu sehen, wie sich der <p>-Text ändert.