HTMLElement : évènement interest
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
L'évènement interest de l'interface HTMLElement est déclenché sur l'élément cible d'un déclencheur d'intérêt lorsque l'intérêt est affiché, permettant d'exécuter du code en réponse.
Syntaxe
On utilisera le nom de l'évènement dans des méthodes telles que addEventListener(), ou on définira une propriété gestionnaire d'évènements.
addEventListener("interest", (event) => { })
oninterest = (event) => { }
Type d'évènement
Un objet InterestEvent. Hérite de l'objet Event.
Exemples
Utilisation simple de l'évènement interest
Dans cet exemple, nous utilisons les évènements interest et loseinterest pour indiquer quand l'intérêt est affiché ou perdu sur un élément HTML <button> qui agit comme déclencheur d'intérêt. Nous le faisons en affichant des messages dans le contenu texte de l'élément HTML cible <p>.
HTML
Nous établissons la relation entre le déclencheur d'intérêt <button> et son élément cible <p> en définissant la valeur de l'attribut interestfor du <button> égale à l'attribut id du <p>.
<button href="#" interestfor="mytarget">Déclencheur d'intérêt</button>
<p id="mytarget">Aucun intérêt n'est affiché actuellement.</p>
JavaScript
Nous obtenons une référence vers l'élément <button> et son élément cible via la propriété interestForElement.
const invoker = document.querySelector("[interestfor]");
const target = invoker.interestForElement;
Nous ajoutons ensuite deux gestionnaires d'évènements sur l'élément cible, pour les évènements interest et loseinterest.
- Lorsque l'intérêt est affiché, nous mettons à jour le contenu texte de l'élément
<p>cible pour indiquer l'évènement et inclure l'élément qui l'a déclenché ; dans cet exemple, il s'agit de l'élément<button>. Notez que vous pouvez obtenir une référence vers le déclencheur d'intérêt via la propriétésourcede l'objet de l'évènement. - Lorsque l'intérêt est perdu, nous mettons à jour le texte du paragraphe pour indiquer que l'intérêt n'est plus affiché.
target.addEventListener("interest", (e) => {
target.textContent = `Intérêt affiché via l'élément ${e.source.tagName}.`;
});
target.addEventListener("loseinterest", () => {
target.textContent = `Intérêt perdu.`;
});
Résultat
L'exemple s'affiche ainsi :
Essayez d'afficher et de perdre l'intérêt sur le bouton (par exemple, en le survolant ou en le sélectionnant) pour voir comment le texte du <p> change.