HTMLElement: interest event

The interest event of the {{domxref("HTMLElement")}} interface is fired on an interest invoker's target element when interest is shown, allowing code to be run in response.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

js-nolint

addEventListener("interest", (event) => { })

oninterest = (event) => { }

Event type

An {{domxref("InterestEvent")}}. Inherits from {{domxref("Event")}}.

Examples

Basic interest invoker event usage

In this example, we use the interest and loseinterest events to report when interest is shown and lost on a {{htmlelement("button")}} element that acts as an interest invoker. We do this by printing messages into the target {{htmlelement("p")}} element's text content.

HTML

We set up the relationship between the <button> element interest invoker and its target <p> element by setting the value of the <button> element's interestfor attribute equal to the <p> element's id.

html

<button href="#" interestfor="mytarget">Interest invoker</button>
<p id="mytarget">No interest being shown currently.</p>

JavaScript

We get a reference to the <button> element and its target element via the {{domxref("HTMLButtonElement.interestForElement", "interestForElement")}} property.

const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;

We then set two event listeners on the target element, for the interest and loseinterest events.

When interest is shown, we update the target <p> element's text content to report the event and include the element that triggered it; in this example, that's the <button> element. Note how you can get a reference to the interest invoker via the event object's {{domxref("InterestEvent.source", "source")}} property.
When interest is lost, we update the paragraph text to report that interest is no longer being shown.

target.addEventListener("interest", (e) => {
  target.textContent = `Interest shown via the ${e.source.tagName} element.`;
});

target.addEventListener("loseinterest", () => {
  target.textContent = `Interest lost.`;
});

Result

The example renders like this:

Try showing and losing interest in the button (for example, by hovering or focusing it) to see how the <p> text changes.