HTMLElement: loseinterest event
The loseinterest event of the HTMLElement interface is fired on an interest invoker's target element when interest is lost, allowing code to be run in response.
This event is not cancelable.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("loseinterest", (event) => { })
onloseinterest = (event) => { }
Event type
An InterestEvent. Inherits from Event.
Examples
Basic interest invoker event usage
In this example, we use the interest and loseinterest events to report when interest is being shown and lost on a <button> element interest invoker. We do this by printing messages into the <p> target element's text content.
HTML
We set up a relationship between the <button> element interest invoker and its target <p> element by setting the <button> element's interestfor attribute equal to the <p> element's id.
<button href="#" interestfor="mytarget">Interest invoker</button>
<p id="mytarget">Interest not being shown.</p>
JavaScript
We grab a reference to the <button> element and its target element (via its 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 print a message into the target
<p>element's text context to say that interest has been shown via the<button>element. Note how you can get a reference to the interest invoker via the event object'ssourceproperty. - When interest is lost, we report that, again via a message printed to the paragraph text.
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/losing interest in the button (for example, by hovering or focusing it) to see how the <p> text changes.