HTMLElement: loseinterest event

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

This event is normally cancelable, except when the user hits the <kbd>Esc</kbd> key to lose interest in all interest invokers contained in the document.

Syntax

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

js-nolint

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

onloseinterest = (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 being 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.