new InterestEvent() — Methode · JavaScript-Referenz

Signatur

new InterestEvent(type, options)

Beschreibung

Der Konstruktor InterestEvent() erzeugt ein Event-Objekt vom Typ InterestEvent. Solche Events gehören zur Interest-Invoker-API: Ein Element mit dem HTML-Attribut interestfor="id" (etwa ein <button> oder <a>) zeigt „Interesse“ an einem Zielelement, z. B. wenn man mit der Maus darüberfährt, den Fokus setzt oder lange drückt. Das Zielelement erhält dann ein interest-Event und später beim Verlassen ein loseinterest-Event.

Der Browser erzeugt diese Events normalerweise selbst. Den Konstruktor braucht man vor allem, um eigene synthetische Events auszulösen, etwa in Unit-Tests, in Polyfills oder um eine eigene Komponentenlogik mit derselben Event-Struktur zu versorgen.

Die wichtigste zusätzliche Eigenschaft ist source: Sie verweist auf das auslösende Element, also den „Interest-Invoker“. Über das options-Objekt kann man sie beim Erzeugen setzen, außerdem die üblichen EventInit-Felder wie bubbles oder cancelable.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Events, groß- und kleinschreibungsabhängig. Der Browser verwendet `"interest"` und `"loseinterest"`.
$options	object	{}	Optionales Objekt, das zusätzlich zu den `EventInit`-Feldern (`bubbles`, `cancelable`, `composed`) folgendes Feld kennt: `source` (`Element \| null`, Standard `null`): das Element, das das Interesse ausgelöst hat.

Rückgabewert

Typ

InterestEvent

Beschreibung

Ein neues InterestEvent-Objekt. Man kann es mit dispatchEvent() auslösen.

Beispiele

Event erzeugen und Eigenschaften prüfen

const trigger = document.createElement('button');
trigger.id = 'info-btn';

const event = new InterestEvent('interest', {
  source: trigger,
  cancelable: true
});

console.log(event.type);        // Event-Name
console.log(event.source.id);   // auslösendes Element
console.log(event.cancelable);
console.log(event.isTrusted);   // synthetisch erzeugt

interest info-btn true false

Auf interest/loseinterest reagieren und im Test simulieren

// HTML:
// <button id="btn" interestfor="tip">Hilfe</button>
// <div id="tip" popover="hint">Kurzer Hinweis</div>

const tip = document.getElementById('tip');
const btn = document.getElementById('btn');

tip.addEventListener('interest', (e) => {
  console.log(`Interesse von #${e.source.id}`);
  tip.dataset.state = 'aktiv';
});

tip.addEventListener('loseinterest', (e) => {
  console.log(`Interesse verloren von #${e.source.id}`);
  tip.dataset.state = 'inaktiv';
});

// Im Test manuell auslösen:
tip.dispatchEvent(new InterestEvent('interest', { source: btn }));
tip.dispatchEvent(new InterestEvent('loseinterest', { source: btn }));

Interesse von #btn Interesse verloren von #btn

Feature-Erkennung mit Rückfall auf CustomEvent

const fireInterest = (target, source) => {
  const event = 'InterestEvent' in window
    ? new InterestEvent('interest', { source })
    : new CustomEvent('interest', { detail: { source } });
  target.dispatchEvent(event);
};

const target = document.createElement('div');
target.addEventListener('interest', (e) => {
  const src = e.source ?? e.detail?.source;
  console.log('Quelle:', src.tagName);
});

fireInterest(target, document.createElement('a'));

Quelle: A

// Wichtig · Fallstricke

Experimentell: Die Interest-Invoker-API ist bisher nur in Chromium-basierten Browsern verfügbar. Firefox und Safari unterstützen sie noch nicht. Prüfe die Verfügbarkeit mit 'InterestEvent' in window, sonst wirft der Aufruf einen ReferenceError.
Ein selbst erzeugtes Event hat isTrusted === false. Es öffnet kein Popover und löst kein anderes Standardverhalten des Browsers aus. Es ruft nur die registrierten Listener auf. Zum Öffnen dienen showPopover() bzw. das echte interestfor-Verhalten.
Ohne source ist die Eigenschaft null. Prüfe sie in Handlern also vor dem Zugriff.
Über Shadow-DOM-Grenzen hinweg wird source umgezielt (Retargeting), ähnlich wie bei event.target. Außerhalb des Shadow Trees sieht man also eventuell nur den Host.
Standardmäßig ist bubbles false. Delegierte Listener an Vorfahren erhalten das Event deshalb nur, wenn du bubbles: true setzt.

Siehe auch

new InputEvent() new PointerEvent() new ProgressEvent() new ErrorEvent() new InstallEvent()