Introduction

La gestion d'évènements ne fait pas partie du langage Javascript mais il utilise beaucoup de fonctionnalité du langage.

Cette gestion est définie par le navigateur où par le DOM Event du W3C. Le DOM Event définit dans Mozilla sera étudié ici.

Déclaration d'évènements

Dans une page Javascript, on peut ajouter des évènements à des éléments HTML ou à des objets en Javascript.

HTML

HTML possède des attributs évènements qui lance le script javascript lorsque l'évènement est déclenché par une action de l'usager ou lors du changement de l'état d'un élément.

Exemple d'un évènement qui se produit lors d'un clique de souris sur un bouton. Le code javascript "alert(1)" est exécuté lorsque l'évènement se produit.

<input type="button" value="Click" onclick="alert(1);" />

Exemple d'un évènement qui se produit lors du changement d'état d'un document (la fin du chargement). Le code "a=1; alert(a); a=2;" s'exécute.

<body onload="a=1; alert(a); a=2;"></body>

Note: il s'agit d'un fragment de code javascript. On peut indiquer plusieurs instructions, définir des fonctions, utiliser des parenthèses {}, etc.

Les fragments de code possèdent deux objets relatifs à l'évènement.

  • this : représente l'objet javascript de l'élément HTML. Il faut se reférer au DOM 2 HTML pour connaître les propriétés et méthodes de l'élément HTML. Chaque balise possède des propriétés et méthodes différentes.
  • event : représente l'évènement qui s'est produit. L'évènement peut être de type KeyEvent, MouseEvent, etc..

Exemple d'utilisation de this

<body onload="alert('Évènement body onload:  attribut class = ' + this.className + ' et nom de balise = ' + this.tagName);" />
<input type="button" value="Click" onclick="alert('Évènement input onclick: value=' + this.value + ' type=' + this.type);" />
</body>

Exemple d'utilisation de event (interface KeyEvent dans DOM Level 3 Events)

<input type="text" value="" onkeypress="if (event.keyCode==13) { alert('Vous avez appuyer sur la touche ENTER'); }" />

Exemple d'utilisation de event (interface MouseEvent)

<img alt="" src="image.png" onclick="alert(event.button + ' ' + event.clientX + ' ' + event.clientY);" />

Javascript

On peut ajouter des évènements sur certains attributs d'éléments ou des balises à l'aide d'affectation de fonctions.

Les propriétés évènements des objets et le nom des évènements sont prédéfinies.

Par exemple, on peut remplacer un l'attribut HTML onload="" sur la balise body à l'aide de deux syntaxes:

// ancien méthode
window.onload = function() { alert('test'); }

// nouvelle méthode définie par le DOM du W3C
window.addEventListener('load', function() { alert('test'); }, false);

La deuxième syntaxe provient du W3C. On peut enlever l'évènement avec la méthode removeEventListener.

function myLoadListener(e) { alert('test' + e); } 

window.addEventListener('load', myLoadListener, false);
window.removeEventListener('load',myLoadListener,false);

On doit nécessairement connaître tous les paramètres pour enlever l'évènement avec removeEventListener. Avec add/remove EventListener, on ajoute des évènements à une liste d'évènements qui est définit par trois paramètres: le type, la fonction et l'utilisation de la capture.

Dans les fonctions d'écoute (listener), le premier paramètre de la fonction peut représenter l'évènement en cours. La variable "this" dans la fonction d'écoute représente l'objet propre à l'évènement. Attention: le comportement de "this" à l'intérieur d'une fonction est différent s'il s'agit d'un ajout en HTML ou en Javascript.

Voici un exemple d'utilisation de addEventListener sur un bouton. On peut tester ce script avec un navigateur supportant DOM 2 Event.

<script type="text/javascript">
/** code javascript */
function button_mouseup(evt) {
   alert('button value= '  + this.value + ', event button: ' + evt.button);
}


function window_load() {
      // l'élément HTML input est accessible seulement après le chargement du document
      // ou dans un script situé après la balise input.
      // ici on attend le déclenchement du "load" du document
      var button1 = document.getElementById('button1'); 

      // ajout de l'évènement
      button1.addEventListener('mouseup', button_mouseup, false);
}
window.addEventListener('load', window_load, false);
</script>

<!-- code html -->
<body>
 <input type="button" value="Button Value" id="button1" />
</body>

Pour reproduire ce comportement à l'aide de l'attribut HTML, on devrait écrire:

<script type="text/javascript">
/** code javascript */
function button_mouseup(inputElement, evt) {
   alert('button value= '  + inputElement.value + ', event button: ' + evt.button);
}
</script>

<!-- code html -->
<body>
 <input type="button" value="Button Value" id="button1" onmouseup="button_mouseup(this, event)" />
</body>

Hyperliens...

Lire les commentaires | Laisser un commentaire