Infos
Dans ce chapitre nous allons étudier comment assigner en javascript un événement à un élément HTML ou XHTML
Tableau des couleurs web
Netscape (Mozilla,Firefox) et Internet Explorer ne gèrent pas de la même façon l'objet event. Pour le premier, l'objet
event est
passé en paramètre à la fonction qui gère l'événement, pour le second c'est
un objet global window.event.
L'objet
event regroupe un ensemble de propriétés relatives à l'événement javascript.
Voici la méthode pour récupérer l'objet
event suivant les navigateurs.
Code javascript :Exemple de code :
function action(event){
var event = event || window.event;
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action; event.type
La propriété type de l'objet event permet de récupérer le type d'événement.
En règle générale
sa valeur est le nom l'événement en minuscule sans le "on". Par exemple : onclick == click.
Code javascript :Exemple de code :
function action(event){
var event = event || window.event;
alert(event.type);
//click
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action; event.target vs event.srcElement
La propriété target de l'objet javascript event permet de récupérer l'objet qui a déclanché l'évenement.
Encore une fois Internet Explorer ne veut pas faire comme tout le monde. Pour lui, c'est
srcElement qui représente l'objet.
Voici la méthode pour récupérer l'objet
event suivant les navigateurs.
Exemple de code :
function action(event){
var event = event || window.event;
var target = event.target || event.srcElement;
alert(target.nodeName);
//DIV
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action; Attention, ce n'est pas forcement l'objet sur lequel est attaché l'événement qui sera renvoyé. Dans le cas ci-dessous si le div a un événement
onclick et que vous avez cliqué sur l'image; c'est l'objet javascript de l'image qui est renvoyé, puisque c'est lui qui a déclanché l'événement.
Exemple de code :
<div id="idevement">Mon évènement javascript <img src="monimage.gif" id="monimage"></div> event.clientX et event.clientY
Pour certain événement où la souris intervient comme le onclick, onmouseup, ... , l'objet event a en plus les propriétés clientX et clientY
Ces deux propriétés donne la position du curseur au moment où l'événement a été effectué.
L'origine est le coin haut gauche de la zone de contenu de la fenêtre de votre navigateur.