HTMLElement: interest — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("interest", handler)

Beschreibung

Das interest-Ereignis gehört zur Interest Invokers API. Ein Interest-Invoker ist ein <button>-, <a>- oder <area>-Element mit dem Attribut interestfor="ziel-id". Der Nutzer zeigt Interesse, wenn er mit der Maus über das Element fährt, es mit der Tastatur fokussiert oder es auf Touch-Geräten lange gedrückt hält. Nach einer kurzen Verzögerung, die sich per CSS mit interest-delay einstellen lässt, feuert der Browser interest auf dem Ziel-Element, also nicht auf dem Invoker selbst.

Das Ereignisobjekt ist ein InterestEvent. Seine Eigenschaft source verweist auf den Invoker, der das Ereignis ausgelöst hat. So kann ein einziges Ziel, zum Beispiel ein gemeinsamer Tooltip oder eine Vorschaukarte, von mehreren Invokern genutzt werden und seinen Inhalt passend zum Auslöser anpassen.

Ist das Ziel ein Popover (typischerweise popover="hint" oder popover="auto"), zeigt der Browser es automatisch an. Das Ereignis lässt sich abbrechen: Ruft man event.preventDefault() auf, bleibt das Popover geschlossen. Das Gegenstück ist das Ereignis loseinterest. Es feuert, wenn das Interesse endet, und schließt das Popover wieder.

Einen Handler registriert man entweder mit addEventListener("interest", …) oder über die Eigenschaft oninterest. Typische Einsatzfälle sind Tooltips, Link-Vorschauen, Profilkarten beim Hovern und das Nachladen von Inhalten erst dann, wenn der Nutzer sie wirklich sehen will.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"interest"`.
$handler Pflicht	(event: InterestEvent) => void		Callback, der ein `InterestEvent` erhält. Die wichtigste Eigenschaft ist `event.source` (`Element`): der Invoker, der das Interesse ausgelöst hat.
$options	boolean \| AddEventListenerOptions	false	Die üblichen Optionen wie `once`, `signal`, `capture` oder `passive`. Ein passiver Listener kann `preventDefault()` nicht nutzen.

Beispiele

Gemeinsame Profilkarte für mehrere Links

// HTML:
// <a href="/u/anna" interestfor="profil" data-user="anna">Anna</a>
// <a href="/u/ben" interestfor="profil" data-user="ben">Ben</a>
// <div id="profil" popover="hint"></div>

const karte = document.getElementById('profil');

karte.addEventListener('interest', (event) => {
  // event.source ist der Link, über dem der Nutzer gerade schwebt
  const user = event.source.dataset.user;
  karte.textContent = `Profil von ${user}`;
  console.log('Interesse an:', user);
});

Interesse an: anna

Vorschau erst bei Interesse nachladen (oninterest)

const vorschau = document.getElementById('vorschau');
const cache = new Map();

vorschau.oninterest = async (event) => {
  const url = event.source.href;
  if (!cache.has(url)) {
    vorschau.textContent = 'Lädt …';
    const res = await fetch(`/api/preview?url=${encodeURIComponent(url)}`);
    cache.set(url, await res.text());
  }
  vorschau.textContent = cache.get(url);
};

// Handler wieder entfernen
// vorschau.oninterest = null;

Anzeige verhindern und Listener sauber entfernen

const tipp = document.getElementById('tipp');
let tippsAktiv = false;

const onInterest = (event) => {
  if (!tippsAktiv) {
    event.preventDefault(); // Popover wird nicht geöffnet
    console.log('Tooltip unterdrückt');
  }
};

tipp.addEventListener('interest', onInterest);
tipp.addEventListener('loseinterest', () => console.log('Interesse beendet'));

// Später, z. B. beim Abbau der Komponente:
tipp.removeEventListener('interest', onInterest);

Tooltip unterdrückt

Feature-Erkennung mit Fallback

const unterstuetzt = 'interestForElement' in HTMLButtonElement.prototype;

if (!unterstuetzt) {
  // Fallback: Hover und Fokus selbst behandeln
  document.querySelectorAll('[interestfor]').forEach((btn) => {
    const ziel = document.getElementById(btn.getAttribute('interestfor'));
    const zeigen = () => ziel.showPopover?.();
    const verbergen = () => ziel.hidePopover?.();
    btn.addEventListener('mouseenter', zeigen);
    btn.addEventListener('focus', zeigen);
    btn.addEventListener('mouseleave', verbergen);
    btn.addEventListener('blur', verbergen);
  });
}
console.log('Interest Invokers:', unterstuetzt);

Interest Invokers: true

// Wichtig · Fallstricke

Experimentell: Die API wird derzeit nur von Chromium-Browsern ab Version 142 unterstützt. Firefox und Safari kennen sie noch nicht, und die Spezifikation kann sich noch ändern. Die Unterstützung erkennt man an 'interestForElement' in HTMLButtonElement.prototype. Für andere Browser braucht man einen Fallback oder ein Polyfill.
Ziel statt Invoker: Das Ereignis feuert auf dem Element, auf das interestfor verweist, nicht auf dem Button oder Link. Den Auslöser findet man über event.source.
Verzögerung: Das Ereignis kommt nicht sofort beim Hovern, sondern erst nach der Zeit aus interest-delay-start. Das Ende des Interesses richtet sich nach interest-delay-end. Wer die Reaktion schneller oder langsamer haben will, stellt diese Werte in CSS ein.
Asynchrone Handler: preventDefault() wirkt nur, wenn es synchron aufgerufen wird, also vor dem ersten await.
Barrierefreiheit: Interesse lässt sich auch per Tastatur-Fokus zeigen. Wichtige Inhalte oder Aktionen sollten deshalb nicht ausschließlich im Hover-Ziel stehen, denn auf Touch-Geräten ist langes Drücken für viele Nutzer schwer zu entdecken.
Die zugehörigen CSS-Pseudoklassen heißen :interest-source und :interest-target.

Siehe auch

InterestEvent HTMLButtonElement.interestForElement HTMLElement.showPopover() Element: keypress HTMLElement: loseinterest