Trouver la liste des propriétés DOM d’une balise HTML

Introduction

Le binding d’événement d’Angular repose sur la syntaxe suivante :

<balise (evenementDOM)="instruction">

Les propriétés DOM disponibles dépendent de la balise dans laquelle on écrit le binding. Par exemple, on peut binder à “click” dans un bouton (<button (click)="instruction">), on peut binder à “change” dans un champ texte (<input (change)="instruction">)…

Mais comment connaître la liste de tous les événements DOM disponibles sur une balise donnée ?

IMPORTANT. Le DOM est un standard implémenté par les navigateurs et ne dépend pas d’Angular. Angular permet de réagir aux événements du DOM, mais il n’est pas responsable de créer ou déclencher ces événéments.

Via les Developer Tools du navigateur

NB. Les instructions qui suivent portent sur Google Chrome, mais tous les navigateurs devraient avoir une fonctionnalité équivalente.

Faites un clic droit sur la balise qui vous intéresse et choisissez “Inspecter” dans le menu déroulant qui apparaît. Le volet “Éléments” des Developer Tools doit s’ouvrir, et le marqueur == $0 doit être visible à côté de la balise que vous avez sélectionnée.

SCREENSHOT

Puis, ouvrez le volet “Event Listeners” tout à droite des Developer Tools. On voit alors une liste d'événements. S'agit-il des événements qui ont un listener ou qui peuvent être écoutés ?

Via la documentation

Une autre manière de trouver la liste des événements DOM d’une balise donnée est de regarder la documentation du DOM.

Le site MDN est une bonne ressource, par exemple :