Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The interest event of the HTMLElement interface is fired on an interest invoker's target element when interest is shown, allowing code to be run in response.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("interest", (event) => { })
oninterest = (event) => { }An InterestEvent. Inherits from Event.
In this example, we use the interest and loseinterest events to report when interest is shown and lost on a <button> element that acts as an interest invoker. We do this by printing messages into the target <p> element's text content.
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.
<button href="#" interestfor="mytarget">Interest invoker</button>
<p id="mytarget">No interest being shown currently.</p>We get a reference to the <button> element and its target element via the 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.
<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 source property.target.addEventListener("interest", (e) => {
target.textContent = `Interest shown via the ${e.source.tagName} element.`;
});
target.addEventListener("loseinterest", () => {
target.textContent = `Interest lost.`;
});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.