Assigner un événement - Cours Javascript

Introduction

Infos

Dans ce chapitre nous allons étudier comment assigner en javascript un événement à un élément HTML ou XHTML

Types d'événement

Infos

Voici les types d'événement reconnus par l'ensemble des navigateurs à quelques exceptions :
evénement descriptif
onabort L'utilisateur a stoppé le chargement de l'image n'est reconnue que par IE.
onblur Lors de la perte du focus.
onchange Quand on change le contenu.
onclick Quand je clique.
ondblclick Quand on fait un double clique.
onerror Lorsqu'il se produit une erreur de script.
onfocus Quand un élément gagne le focus.
onkeydown Quand j'appuie sur la touche.
onkeypress Quand j'appuie sur une touche.
onkeyup Quand je relâche la touche.
onload Quand la page est totalement chargée (images incluses).
onmousedown Quand le bouton de la souris est appuyé.
onmouseout Quand je sors de l'élément.
onmouseover Quand je passe sur l'élément.
onmouseup Quand le bouton de la souris est relâché.
onmousemove Quand je bouge la souris
onmove Quand je déplace la fenêtre.
onreset Quand je réinitialise.
onresize Quand je redimensionne la fenêtre (seulement sur window )
onselect Quand je sélectionne.
onsubmit Quand j'envoie un formulaire.
onunload Quand on ferme la fenêtre, peut être ignoré par certain navigateur.
onscroll Quand on déplace la barre de scroll.
sur window ou un element avec overflow

Assigner un événement

Définition

Pour assigner un événement en javascript, vous devez récupérer l'objet javascript qui correspond à la balise html ou xhtml sur laquelle vous voulez mettre l'événement.
Dans l'exemple suivant, nous voulons assigner un événement onclick sur la balise div ayant comme id "idevement".
Exemple de code :
<div id="idevement">Mon événement javascript</div>

Code javascript :
Exemple de code :
function action(){
  alert("mon action")
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;

L'emploi de this

Définition

Dans la fonction qui est assignée l'événement (Element.onEvement = nomFonction), vous pouvez utiliser this.
this représente l'objet javascript auquel on a assigné l'événement.

Par exemple nous voulons récupérer l'url du lien sur le onmouseover.
Exemple de code :
<a href="http://www.zonecss.fr/" id="idevement">Toutes les feuilles de styles css</div>

Code javascript :
Exemple de code :
function action(){
  alert(this.href);
//http://www.zonecss.fr/
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;

L'objet event

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.

Propagation des événements

Définition

Dans le cas où vous avez des balises imbriquées avec le même événement. Les événements se propagent du bas vers le haut c'est à dire du fils vers le parent.
Exemple de code :
<div id="idevement">Mon évènement javascript <img src="monimage.gif" id="monimage"></div>

Exemple de code :
function action(){
  alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;
function action2(){
  alert("action monimage");
}
var ImgElement = document.getElementById("monimage");
ImgElement.onclick = action2;

Mon évènement javascript
Cliquer sur l'image, l'événement de l'image est déclanché puis c'est celui du parent.

Arréter la propagation

Imaginons que lorsque l'on clique sur l'image nous voulons pas que l'événement du parent soit déclanché.
Pour cela vous devez utiliser la propriété cancelBubble de l'object event qui permet d'arrêter la propagation de l'événement.
Cependant Firefox conseille l'utilisation de la méthode stopPropagation de l'objet event à la place de la propriété cancelBubble.
Nous somme donc obligé de coupler cancelBubble et stopPropagation.
Exemple de code :
<div id="idevement">Mon évènement javascript<img src="monimage.gif" id="monimage"></div>

Exemple de code :
function action(){
  alert("action idevement");
}
var momoElement = document.getElementById("idevement");
momoElement.onclick = action;
function action2(){
  alert("action monimage");
  if (event.stopPropagation) {
    event.stopPropagation();
  }
  event.cancelBubble = true;
}
var ImgElement = document.getElementById("monimage");
ImgElement.onclick = action2;

Exemple :
Mon événement javascript

Annuler l'événement

Infos

Vous pouvez annuler l'action effectuée, par exemple sur un onsubmit (envoi du formulaire).
Pour cela vous devez utiliser la méthode javascript preventDefault de l'object javascript event qui permet d'annuler l'événement.
Cependant Intenet Explorer utilise la propriété javascript returnValue de l'objet event.
Nous somme donc obligé de coupler preventDefault et returnValue.
Exemple de code :
<form action="http://www.aliasdmc.fr" target="_blank" id="idevement"><input type="submit" value="envoyer" /></form>

Code javascript :
Exemple de code :
function action(event){
  var event = event || window.event;
  if (event.preventDefault) {
    event.preventDefault();
  }
  event.returnValue = false;
}
var momoElement = document.getElementById("idevement");
momoElement.onsubmit = action;