HTMLElement: loseinterest — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("loseinterest", handler)

Beschreibung

Das Ereignis loseinterest gehört zur experimentellen Interest-Invoker-API. Ein Interest-Invoker ist ein <a>-, <button>- oder <area>-Element mit dem Attribut interestfor="id", das auf ein Ziel-Element verweist. Bewegt der Nutzer die Maus über den Invoker, fokussiert ihn per Tastatur oder drückt lange darauf (Touch), zeigt er Interesse – das Ziel erhält das Ereignis interest. Verlässt der Nutzer den Invoker (und das Ziel) wieder, verliert er das Interesse, und auf dem Ziel-Element wird loseinterest ausgelöst.

Typischer Einsatz sind Tooltips, Hover-Karten und Vorschau-Popups, ohne eigene mouseenter/mouseleave/focus/blur-Logik schreiben zu müssen. Ist das Ziel ein Popover (popover-Attribut), öffnet und schließt der Browser es automatisch; loseinterest eignet sich dann zum Aufräumen, etwa um laufende Anfragen abzubrechen, Timer zu stoppen oder Analysedaten zu erfassen.

Das Ereignisobjekt ist ein InterestEvent. Dessen Eigenschaft source verweist auf den Invoker, der das Interesse verloren hat – nützlich, wenn mehrere Invoker auf dasselbe Ziel zeigen. Registrieren lässt sich der Handler per addEventListener("loseinterest", …) oder über die Eigenschaft onloseinterest. Die Verzögerung bis zum Auslösen steuert man per CSS mit interest-delay-end (bzw. der Kurzform interest-delay).

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"loseinterest"`.
$handler Pflicht	(event: InterestEvent) => void		Callback, der ein `InterestEvent` erhält. `event.source` ist das Invoker-Element, `event.target` das Ziel-Element.
$options	boolean \| AddEventListenerOptions	false	Übliche Listener-Optionen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein InterestEvent (erbt von Event) mit der Eigenschaft source.

Beispiele

Tooltip-Popover: Schließen protokollieren

// HTML:
// <button interestfor="hilfe">Was ist das?</button>
// <div id="hilfe" popover="hint">Kurze Erklärung zum Feature.</div>

const tooltip = document.getElementById('hilfe');

tooltip.addEventListener('interest', (event) => {
  console.log('Interesse von:', event.source.textContent);
});

tooltip.addEventListener('loseinterest', (event) => {
  console.log('Interesse verloren bei:', event.source.textContent);
});

Interesse von: Was ist das? Interesse verloren bei: Was ist das?

Vorschau-Karte: laufenden Fetch abbrechen

// HTML:
// <a href="/user/42" interestfor="karte" data-user="42">@anna</a>
// <div id="karte" popover="hint">Lade …</div>

const karte = document.getElementById('karte');
let controller = null;

karte.addEventListener('interest', async (event) => {
  controller = new AbortController();
  const id = event.source.dataset.user;
  try {
    const res = await fetch(`/api/users/${id}`, { signal: controller.signal });
    const user = await res.json();
    karte.textContent = `${user.name} – ${user.bio}`;
  } catch (err) {
    if (err.name !== 'AbortError') console.error(err);
  }
});

karte.addEventListener('loseinterest', () => {
  controller?.abort(); // Anfrage nicht mehr nötig
  karte.textContent = 'Lade …';
});

Handler per onloseinterest-Eigenschaft und Entfernen

const ziel = document.getElementById('hilfe');

// Variante 1: on-Property (überschreibt vorherige Zuweisung)
ziel.onloseinterest = (event) => {
  console.log('Geschlossen, Quelle:', event.source.id || event.source.tagName);
};

// Variante 2: benannter Listener, später wieder entfernen
const onLose = () => console.log('loseinterest');
ziel.addEventListener('loseinterest', onLose);
// ...
ziel.removeEventListener('loseinterest', onLose);
ziel.onloseinterest = null;

Geschlossen, Quelle: BUTTON

Feature-Erkennung und Verzögerung per CSS

const unterstuetzt = 'interestForElement' in HTMLButtonElement.prototype;
console.log('Interest-Invoker unterstützt:', unterstuetzt);

if (!unterstuetzt) {
  // Fallback: mouseleave/blur manuell behandeln
  const btn = document.querySelector('[interestfor]');
  const ziel = document.getElementById(btn.getAttribute('interestfor'));
  const verstecken = () => ziel.hidePopover?.();
  btn.addEventListener('mouseleave', verstecken);
  btn.addEventListener('blur', verstecken);
}

// CSS: [interestfor] { interest-delay-end: 300ms; }

Interest-Invoker unterstützt: true

// Wichtig · Fallstricke

Experimentell: Die Interest-Invoker-API ist derzeit nur in Chromium-Browsern verfügbar (ab Version 142). Firefox und Safari unterstützen sie noch nicht – immer Feature-Erkennung (z. B. 'interestForElement' in HTMLButtonElement.prototype) und einen Fallback mit mouseleave/focusout einplanen. Details der Spezifikation können sich noch ändern.
Das Ereignis wird auf dem Ziel-Element ausgelöst, nicht auf dem Invoker. Ein Listener am Button reagiert also nicht. Welcher Invoker betroffen ist, verrät event.source.
loseinterest kommt nicht sofort beim Verlassen: Die Verzögerung aus interest-delay-end (Standard ca. 250 ms) gilt, und wenn der Zeiger ins Ziel-Element wandert, bleibt das Interesse bestehen.
Nur <a>, <button> und <area> (sowie SVG-<a>) können Interest-Invoker sein; auf anderen Elementen wird interestfor ignoriert.
Für barrierefreie Tooltips eignet sich popover="hint"; der Browser setzt dann passende ARIA-Beziehungen. Wichtige Inhalte sollten nicht ausschließlich per Hover erreichbar sein.
Wer im interest-Handler asynchron Daten nachlädt, sollte in loseinterest mit AbortController abbrechen, damit keine veralteten Antworten angezeigt werden.

Siehe auch

InterestEvent InterestEvent.source HTMLButtonElement.interestForElement HTMLElement.popover HTMLElement.hidePopover() EventTarget.addEventListener()