InterestEvent — Schnittstelle · JavaScript-Referenz

Signatur

interface InterestEvent extends Event

Beschreibung

InterestEvent gehört zur Interest Invokers API. Mit dieser API lassen sich Tooltips, Hover-Karten und Vorschauen deklarativ bauen, ganz ohne eigene Maus- und Fokus-Logik. Ein Interest Invoker ist ein <button>, <a> oder SVG-<a> mit dem Attribut interestfor="ziel-id". Der Nutzer zeigt „Interesse“, indem er mit der Maus darüberfährt, das Element per Tastatur fokussiert oder auf Touch-Geräten lange darauf drückt. Das Zielelement ist meist ein Popover (popover="hint" oder popover="auto").

Sobald der Nutzer Interesse zeigt, feuert der Browser am Zielelement ein interest-Event. Verschwindet das Interesse wieder (Maus verlässt das Element, Fokus wandert weiter), folgt ein loseinterest-Event. Beide Events sind vom Typ InterestEvent. Über die Eigenschaft source erfahren Sie, welcher Invoker das Event ausgelöst hat. Das ist praktisch, wenn mehrere Invoker auf dasselbe Ziel verweisen.

Beide Events lassen sich abbrechen: Ein event.preventDefault() unterdrückt die Standardaktion, also das Öffnen bzw. Schließen des Popovers. So können Sie Inhalte vor dem Anzeigen nachladen, die Anzeige an Bedingungen knüpfen oder das Ziel selbst befüllen.

Die Eigenschaften im Überblick:

InterestEvent.source (nur lesbar): Das Element, das das Interesse ausgelöst hat, oder null.
Außerdem alle Eigenschaften und Methoden von Event, z. B. type, target und preventDefault().

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Events, typischerweise `"interest"` oder `"loseinterest"` (Parameter des Konstruktors `new InterestEvent(type, options)`).
$options	object	{}	Optionen-Objekt. Es erbt die Felder von `EventInit` (`bubbles`, `cancelable`, `composed`) und kennt zusätzlich `source`.
$options.source	Element \| null	null	Das Element, das als auslösender Interest Invoker gelten soll. Später auslesbar über `event.source`.

Rückgabewert

Typ

InterestEvent

Beschreibung

Der Konstruktor liefert ein neues InterestEvent-Objekt. In der Praxis erzeugt meist der Browser die Instanz und übergibt sie an Ihre Listener für interest bzw. loseinterest.

Beispiele

Tooltip-Popover mit interest/loseinterest überwachen

// HTML:
// <button interestfor="info-tip">Versandkosten</button>
// <div id="info-tip" popover="hint">Ab 50 € versandkostenfrei.</div>

const tip = document.getElementById('info-tip');

tip.addEventListener('interest', (event) => {
  console.log(`Interesse gezeigt über: ${event.source.textContent}`);
});

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

Interesse gezeigt über: Versandkosten Interesse verloren: Versandkosten

Hover-Karte: Inhalt je nach Invoker nachladen

// HTML:
// <a href="/user/anna" interestfor="user-card" data-user="anna">@anna</a>
// <a href="/user/ben"  interestfor="user-card" data-user="ben">@ben</a>
// <div id="user-card" popover="hint">Lädt …</div>

const card = document.getElementById('user-card');

card.addEventListener('interest', async (event) => {
  const user = event.source?.dataset.user;
  if (!user) return;
  card.textContent = 'Lädt …';
  try {
    const res = await fetch(`/api/users/${encodeURIComponent(user)}`);
    const data = await res.json();
    card.textContent = `${data.name} – ${data.followers} Follower`;
  } catch {
    card.textContent = 'Profil konnte nicht geladen werden.';
  }
});

Anzeige mit preventDefault() unterdrücken

const hint = document.getElementById('info-tip');
const hintsDisabled = localStorage.getItem('hints') === 'off';

hint.addEventListener('interest', (event) => {
  if (hintsDisabled) {
    event.preventDefault(); // Popover wird nicht geöffnet
    console.log('Tooltip unterdrückt');
  }
});

Tooltip unterdrückt

InterestEvent manuell erzeugen (z. B. für Tests)

const target = document.getElementById('info-tip');
const invoker = document.querySelector('[interestfor="info-tip"]');

target.addEventListener('interest', (e) => {
  console.log(e instanceof InterestEvent, e.source === invoker);
});

if ('InterestEvent' in window) {
  const evt = new InterestEvent('interest', { source: invoker, cancelable: true });
  target.dispatchEvent(evt);
}

true true

// Wichtig · Fallstricke

Experimentell: Die Interest Invokers API gibt es bisher nur in Chromium-basierten Browsern. Firefox und Safari unterstützen sie derzeit nicht. Prüfen Sie die Unterstützung vorab mit 'InterestEvent' in window oder 'interestForElement' in HTMLButtonElement.prototype und sehen Sie für andere Browser eine Alternative vor, etwa eigene pointerenter- und focus-Listener.
Die Events feuern am Zielelement, nicht am Invoker. Den Invoker erreichen Sie nur über event.source.
Der Browser löst die Events mit Verzögerung aus. Die Wartezeit steuern Sie per CSS mit interest-delay bzw. interest-delay-start und interest-delay-end. Rechnen Sie also nicht mit einem sofortigen Aufruf beim Hover.
Asynchrone Arbeit in einem interest-Handler (z. B. fetch) hält das Öffnen nicht auf. preventDefault() wirkt nur, wenn Sie es synchron aufrufen.
Barrierefreiheit: Der Browser verknüpft Invoker und Ziel automatisch für Tastatur- und Screenreader-Nutzer. Wichtige Aktionen sollten Sie trotzdem nicht ausschließlich in Hover-Inhalte legen, weil Touch-Nutzer Interesse nur per langem Druck zeigen können.
Die Spezifikation ist noch im Fluss. Attribut- und Eventnamen haben sich in frühen Versionen geändert (früher z. B. interesttarget).

Siehe auch

Event CommandEvent ToggleEvent HTMLElement.showPopover() HTMLButtonElement.interestForElement