InterestEvent.source — Eigenschaft · JavaScript-Referenz

Signatur

get InterestEvent.source

Beschreibung

Die schreibgeschützte Eigenschaft source des InterestEvent-Interfaces verweist auf das Element, das das Interesse ausgelöst hat. Das ist in der Regel ein <button>, <a> oder <area> mit dem HTML-Attribut interestfor. Zeigt der Nutzer Interesse, etwa durch Hovern, Fokussieren per Tastatur oder langes Drücken auf Touch-Geräten, feuert der Browser am Zielelement (z. B. einem Popover) das Ereignis interest. Wird das Interesse aufgegeben, folgt loseinterest.

Wichtig ist der Unterschied zu event.target: target ist das Element, auf dem das Ereignis ausgelöst wird, also das Ziel mit der passenden id. source ist dagegen der Auslöser. So kann ein einziges Tooltip- oder Vorschau-Element von mehreren Auslösern verwendet werden, und im Handler lässt sich erkennen, welcher Auslöser gerade aktiv ist.

Typische Einsätze sind Tooltips, deren Inhalt vom Auslöser abhängt (z. B. aus data-*-Attributen), Link-Vorschauen, Analyse- und Tracking-Code sowie das Setzen von ARIA-Zuständen oder CSS-Klassen am Auslöser, solange das Interesse besteht.

Rückgabewert

Typ

Element | null

Beschreibung

Das Element, auf dem Interesse gezeigt bzw. verloren wurde. Bei einem mit new InterestEvent() selbst erzeugten Ereignis ohne source-Option ist der Wert null.

Beispiele

Auslöser im interest-Ereignis ermitteln

// HTML-Aufbau per JS: Button mit interestfor zeigt auf ein Popover
const btn = document.createElement("button");
btn.id = "hilfe-btn";
btn.textContent = "Hilfe";
btn.setAttribute("interestfor", "hilfe-tip");

const tip = document.createElement("div");
tip.id = "hilfe-tip";
tip.popover = "hint";
tip.textContent = "Hier finden Sie Unterstützung.";

document.body.append(btn, tip);

tip.addEventListener("interest", (event) => {
  console.log("Ziel:", event.target.id);
  console.log("Auslöser:", event.source.id);
});
// Nun mit der Maus über den Button fahren oder ihn fokussieren

Ziel: hilfe-tip Auslöser: hilfe-btn

Ein gemeinsamer Tooltip für mehrere Auslöser

const tip = document.createElement("div");
tip.id = "user-tip";
tip.popover = "hint";
document.body.append(tip);

const users = [
  { name: "Anna", rolle: "Admin" },
  { name: "Ben", rolle: "Redakteur" }
];

for (const u of users) {
  const link = document.createElement("a");
  link.href = `/user/${u.name.toLowerCase()}`;
  link.textContent = u.name;
  link.dataset.rolle = u.rolle;
  link.setAttribute("interestfor", "user-tip");
  document.body.append(link, " ");
}

// Inhalt abhängig vom jeweiligen Auslöser setzen
tip.addEventListener("interest", ({ source }) => {
  tip.textContent = `${source.textContent} – Rolle: ${source.dataset.rolle}`;
  source.classList.add("aktiv");
});

tip.addEventListener("loseinterest", ({ source }) => {
  source.classList.remove("aktiv");
});

(beim Hovern über „Ben“ zeigt der Tooltip: Ben – Rolle: Redakteur)

Synthetisches InterestEvent mit Feature-Erkennung

if (typeof InterestEvent === "function") {
  const trigger = document.createElement("button");
  trigger.id = "test-trigger";
  const ziel = document.createElement("div");
  document.body.append(trigger, ziel);

  ziel.addEventListener("interest", (e) => {
    console.log(e.source === trigger, e.isTrusted);
  });

  ziel.dispatchEvent(new InterestEvent("interest", { source: trigger }));

  // Ohne source-Option
  console.log(new InterestEvent("interest").source);
} else {
  console.log("Interest Invokers werden nicht unterstützt.");
}

true false null

// Wichtig · Fallstricke

Experimentell: Interest Invokers (interestfor, InterestEvent) sind bisher nur in Chromium-basierten Browsern verfügbar. Firefox und Safari unterstützen sie noch nicht. Prüfen Sie die Unterstützung vorab (z. B. mit typeof InterestEvent === \"function\" oder \"interestForElement\" in HTMLButtonElement.prototype) und sehen Sie einen Ersatz vor, etwa mouseenter/focusin.
source ist nicht dasselbe wie target oder currentTarget. Das Ereignis wird am Ziel ausgelöst, source ist der Auslöser.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird stillschweigend ignoriert, im Strict Mode gibt es einen TypeError.
Liegt der Auslöser in einem Shadow DOM, wird source voraussichtlich wie bei CommandEvent.source umgelenkt (Retargeting). Ein Listener außerhalb des Shadow Roots sieht dann den Host statt des inneren Elements.
Bei selbst erzeugten Ereignissen ist isTrusted false. Ob die Interaktion echt war, sollten Sie daher nicht allein an source festmachen.
Das Verhalten (Verzögerungen, Auslösung per Touch) ist noch nicht endgültig festgelegt und kann sich ändern.

Siehe auch

Event.target CommandEvent.source ToggleEvent.source IDBRequest.source MessageEvent.source