Les évènements et l'objet Event

Les évènements peuvent être assignés aux éléments XUL par des attributs, par la méthode DOM addEventListener ou directement par l'objet event.

Les principaux attributs sont les suivants:
- oncommand.
- onclick.
- onkeypress.
- onselect.
Voir la liste complète des attributs de gestion d'évènements.

Le méthode addEventListener

Elle permet d'attacher un évènement à un objet DOM de l'interface graphique utilisateur. L'objet est reconnu par son ID et on y accède avec la méthode classique getElementByID.

Par exemple:

var x = document.GetElementById("bx");
x.addEventListener("command", mafonction, true);

Le premier paramètre est le type d'évènement. "Command" est un évènement, il équivaut à l'attribut oncommand. D'autres évènements sont "mousemove" (onmousemove), "click" (onclick), "close" (onclose), etc...
Le second paramètre est le nom de la fonction qui sera appelée quand l'évènement surviendra.
Le troisième paramètre indique le mode capture ou non. En mode capture, tous les évènements du type donné seront transmis par la hiérarchie des éléments graphiques imbriqués.

Un exemple d'utilisation de addEventListener est donné dans le chapitre sur les menus XUL.

L'objet Event

L'objet event représente l'évènement impliqué par un attribut évènement. Par exemple, l'attribut oncommand correspond à un évènement command, et celui-ci peut être représenté par l'objet event.

Cet objet est argument implicite des fonctions appelées lorsque survient un évènement et données comme second paramètre de la méthode addEventListener.

Prenons pour exemple la definition de la fonction "mafonction" pour un évènement de souris click. Cette fonction peut se définir ainsi:

function mafonction(event)
{
  alert("Coordonnées: " + event.clientX + " " + event.clientY);
}
button.addEventListener("click", mafonction, true);

La fonction affichera les coordonnées sur pixel sur lequel on a cliqué.

Exemple

Démo: code.zip