HTMLButtonElement.interestForElement — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.interestForElement

Beschreibung

Mit interestForElement legt man fest, welches Element auf „Interesse“ an einem Button reagiert. Interesse zeigt der Nutzer, wenn er mit der Maus über den Button fährt, ihn per Tastatur fokussiert oder auf Touch-Geräten lange darauf drückt. Die Eigenschaft spiegelt das HTML-Attribut interestfor. Dort steht die id des Zielelements, im DOM dagegen direkt eine Referenz auf das Element.

Meist ist das Ziel ein Element mit dem Attribut popover, oft popover="hint". Das Ziel wird automatisch angezeigt, sobald Interesse entsteht, und wieder ausgeblendet, wenn es endet. So lassen sich Tooltips, Vorschaukarten oder Hover-Menüs deklarativ bauen – ohne eigene mouseenter-/focus-Logik und mit eingebauter Barrierefreiheit. Unabhängig davon feuert das Ziel die Ereignisse interest und loseinterest (Typ InterestEvent, das den Auslöser über event.source liefert).

Beim Setzen weist man ein Element zu, beim Entfernen null. Anders als beim Attribut braucht das Ziel keine id. Beim Lesen erhält man das aktuell verknüpfte Element. Die Eigenschaft liefert null, wenn das Attribut fehlt oder auf keine gültige id verweist.

Parameter

Name	Typ	Default	Beschreibung
$value	Element \| null	null	Beim Setzen: das Element, das als Ziel des Interest Invokers dienen soll, oder `null`, um die Verknüpfung zu entfernen.

Rückgabewert

Typ

Element | null

Beschreibung

Das verknüpfte Zielelement oder null, wenn keines gesetzt oder auflösbar ist.

Beispiele

Ziel eines deklarativen Tooltips auslesen

// HTML:
// <button id="info-btn" interestfor="info-tip">Info</button>
// <div id="info-tip" popover="hint">Zusatzinformationen</div>

const btn = document.getElementById('info-btn');
console.log(btn.interestForElement?.id);

info-tip

Tooltip per JavaScript verknüpfen (ohne id)

const btn = document.createElement('button');
btn.textContent = 'Hilfe';

const tip = document.createElement('div');
tip.popover = 'hint';
tip.textContent = 'Klicken, um die Hilfe zu öffnen.';

document.body.append(btn, tip);

if ('interestForElement' in HTMLButtonElement.prototype) {
  btn.interestForElement = tip; // Hover/Fokus zeigt nun den Tooltip
} else {
  // Rückfall für Browser ohne Unterstützung
  btn.title = tip.textContent;
}

Auf interest/loseinterest reagieren und Verknüpfung lösen

const btn = document.querySelector('#user-btn');
const card = document.querySelector('#user-card');

btn.interestForElement = card;

card.addEventListener('interest', (event) => {
  console.log('Interesse von:', event.source.id);
});
card.addEventListener('loseinterest', () => {
  console.log('Interesse beendet');
});

// Später: Verknüpfung wieder entfernen
const deaktivieren = () => {
  btn.interestForElement = null;
  console.log(btn.getAttribute('interestfor'));
};
deaktivieren();

null

// Wichtig · Fallstricke

Experimentell: Interest Invoker gibt es bisher nur in Chromium-Browsern (ab etwa Version 142). Prüfe die Unterstützung mit 'interestForElement' in HTMLButtonElement.prototype und sieh einen Rückfall vor. Die Spezifikation kann sich noch ändern: Das Attribut hieß in frühen Versionen interesttarget.
Wird ein Element per Eigenschaft zugewiesen, steht im Attribut interestfor nicht unbedingt die passende id. Verlass dich deshalb nicht auf getAttribute('interestfor'), sondern lies die Eigenschaft.
Das Ziel wird nur dann automatisch angezeigt und ausgeblendet, wenn es ein popover ist. Bei anderen Elementen feuern nur die Ereignisse interest und loseinterest.
Die Verzögerung beim Anzeigen und Ausblenden steuert man per CSS mit interest-delay (bzw. interest-delay-start und interest-delay-end). Zum Gestalten dienen die Pseudoklassen :interest-source und :interest-target.
Zielelemente in einem anderen Shadow-Tree lassen sich nur über die Eigenschaft verknüpfen, nicht über die id im Attribut. Dabei gelten die üblichen Einschränkungen für Referenzen über Shadow-DOM-Grenzen hinweg.
Lege im Tooltip keine wichtigen Informationen oder Bedienelemente ab, die nur per Hover erreichbar sind. Touch-Geräte zeigen Interesse lediglich über langes Drücken an.
Dieselbe Eigenschaft gibt es auch an HTMLAnchorElement, HTMLAreaElement und SVGAElement.

Siehe auch

HTMLButtonElement.commandForElement HTMLButtonElement.popoverTargetElement HTMLButtonElement.formTarget HTMLButtonElement.form HTMLButtonElement.formMethod