Lesévénements JavaScript permettent d'intercepter les changements d'états de l'environnement provoqués par le documentHTML, lesscripts ou l'interaction du client.
Lorsqu'un événement survient, un objet Event permettant de le décrire est créé. Il se propage alors dans l'arbreDOM selon trois phases déterminées par la cible (l'objet depuis lequel l’événement est intercepté) :
Cet objet a été défini par leW3C, mais malheureusementInternet Explorer en a sa propre définition ce qui oblige ledéveloppeur à tenir compte dunavigateur.
Certaines propriétés de cet objet concernent tous les types d'événements et d'autres, tels que le bouton de la souris, sont spécifiques à un ou plusieurs événements. Seules les premières nous intéressent dans cette partie, nous verrons les autres dans la description des événements.
Identique sous Internet Explorer.
Renvoie le type d’événement (onkeydown, onload...).
Équivalent Internet Explorer :srcElement.
Permet de récupérer l'élément depuis lequel l’événement a été envoyé. Il ne s'agit pas forcément de celui auquel on associe la fonction, mais de l'élément qui a récupéré le focus ou qui le récupère au moment de l'action. Par exemple, lors du clique de la souris sur un bouton, c'est ce bouton qui est renvoyé. Ou bien lorsque l'on appuie sur une touche du clavier, c'est l'objet qui a le focus qui est renvoyé.
Non supporté par Internet Explorer.
Permet de récupérer l'objet auquel l’événement a été rattaché. Équivaut à utiliser la référence this qui fonctionne dans certain cas sous Internet Explorer.
Équivalent Internet Explorer : l'attributcancelBubble.
Cette méthode arrête la propagation de l'événement dans l'arbreDOM après le nœud sur lequel il se trouve. Il faut faire attention au fait qu'il s'agisse d'une méthode dans le W3C mais d'un attribut sous Internet Explorer.
Équivalent Internet Explorer : l'attributevent.returnValue = false.
Empêche l'action normalement prévue de se dérouler. Par exemple, lors de l'appui sur la touche tabulation dans un champ texte, cela annulera le changement de focus et permettra l'insertion d'une indentation. Il est préférable d'utiliser l'expression"return false;" (sauf pour Internet Explorer) qui est mieux supportée.
Chaque événement peut être capté par les objets HTML concernés en leurs associant une fonction ou une commande JavaScript. Nous verrons plus loin comment fonctionnent les écouteurs (gestionnaires d'événements DOM-2). Ici nous utiliserons le type de gestionnaire d’événement DOM-0, plus simple et plus fiable : les événements sont des méthodes (le nom de l’événement avec le préfixe "on") qu'il suffit de définir. Ces méthodes peuvent prendre en paramètre un objet Event qui permettra de contrôler l'événement. Cependant, ce paramètre n'est pas toujours nécessaire.
Il existe deux façons de définir les événements :
1. Directement dans la balise de l'objet concerné :
<FORM><INPUTtype="button"id="bt"onclick="alert('Vous avez cliqué sur '+this.id+'.');"></FORM>
La commande peut aussi être une fonction que vous avez vous-même définie ultérieurement.
2. En associant une fonction via JavaScript :
<FORM><INPUTtype="button"id="bt"></FORM>
La fonction javascript est définie après :
document.getElementById("bt").onclick=function(event){alert("Vous avez cliqué sur "+this.id+".");}
Le paramètre Event n'est pas accessible avec Internet Explorer, il faut donc passer par la variable globale window.event. Autrement, il suffit de récupérer l'instance de l'Event en paramètre de la fonction.
//Capture la touche de clavier enfoncéedocument.onkeydown=function(event){//Internet Explorer ne prend pas d'objet Event en paramètre, il faut donc aller le chercher dans l'objet windowif(typeofevent=="undefined")event=window.event;}
Il est possible d'intercepter le flux d’événements dans l'arbre DOM avec des écouteurs d’événements. Pour ajouter un écouteur à un objet HTML il suffit d'utiliser la méthode addEventListener. Cet écouteur peut-être supprimé avec removeEventListener. Il s'agit du type de gestionnaire d’événement DOM-2.
Équivalent Internet Explorer :attachEvent;
Cette méthode crée un écouteur pour un objet HTML. Il prend trois paramètres :
Le mot clé this n'est hélas pas reconnu dans cette méthode, c'est pourquoi il est préférable d'utiliser le gestionnaire d’événement DOM-0.
functionclickMe(event){//this.id renvoie "undefined" : this n'est pas reconnu icialert("Type : "+event.type+"\nCible courante : "+this.id);if(navigator.appName=="Microsoft Internet Explorer"){//Ne fonctionne pas : this n'est pas reconnu icithis.detachEvent("onclick",clickMe);}else{this.removeEventListener("click",clickMe,false);}}if(navigator.appName=="Microsoft Internet Explorer"){document.getElementById("my_button").attachEvent("onclick",clickMe);}else{document.getElementById("my_button").addEventListener("click",clickMe,false);}
Équivalent Internet Explorer :detachEvent;
Pour détruire un écouteur, il faut utiliser cette méthode avec les mêmes paramètres que addEventListener (ou detachEvent).
En cas d'interruption de chargement d'une image.
Objets concernés : Image.
Lorsque l'utilisateur quitte l'objet et que celui-ci perd le focus.
Objets concernés : Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea et window.
Lorsque l'utilisateur quitte l'objet après l'avoir modifié et que celui-ci perd le focus.
Objets concernés : FileUpload, Select, Submit, Text et TextArea.
Exemple de récupération de la valeur :
let select = document.querySelector('#my_select_id'); let selectedOption = select[select.value]; console.log(selectedOption.text);Lors d'un clique de souris sur l'objet.
Objets concernés : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
Lors d'un double clique de souris sur l'objet.
Objets concernés : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
Survient lors d'une erreur de chargement.
Objets concernés : Image et window.
Lorsque l'objet est sélectionné et prend le focus.
Objets concernés : Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea et window.
Lorsqu'on appuie sur une touche. Pour tous les évènements clavier, Event a pour attribut keyCode (Internet Explorer) ou which (Netscape) et contient le code de la touche enfoncée.
document.onkeydown=function(event){//On vérifie le navigateurif(navigator.appName==="Microsoft Internet Explorer"){//On envoie un message avec la touche appuyée pour Internet Exploreralert(event.keyCode);}else{//On envoie un message avec la touche appuyée pour Netscapealert(event.which);}}
Objets concernés : document, Image, Input (type=file, password ou text), Link et TextArea.
Lorsqu'on maintient une touche appuyée. Pour tous les événements clavier, Event a pour attribut keyCode (Internet Explorer) ou which (Netscape) et contient le code de la touche enfoncée.
Objets concernés : document, Image, Link et TextArea.
Lorsqu'on relâche sur une touche. Pour tous les événements clavier, Event a pour attribut keyCode (Internet Explorer) ou which (Netscape) et contient le code de la touche enfoncée.
Objets concernés : document, Image, Link et TextArea.
Lors du chargement de la page HTML, d'une frame ou d'une image.
Objets concernés : Image, Layer et window.
En quittant le fichier. L'objet Event ne subit pas la phase de bouillonnement avec onunload.
Objet concerné : window.
En maintenant une touche de la souris appuyée.
Les attributs de Event pour la souris sont les suivants :
document.onmousedown=function(event){//Netscapeif(navigator.appName!="Microsoft Internet Explorer"){alert(event.pageX+" - "+event.which);}//Internet Explorerelse{alert(window.event.x+" - "+window.event.button);}}
Objets concernés : Button, document et Link.
En relâchant une touche de la souris. Pour les attributs de Event voironmousedown.
Objets concernés : Button, document et Link.
En bougeant la souris. Pour les attributs de Event voironmousedown.
Objets concernés : window et document
En quittant l'élément avec la souris.
Objets concernés : Area, Layer et Link. Pour les attributs de Event voironmousedown.
En passant sur l'élément avec la souris.
Objets concernés : Area, Layer et Link. Pour les attributs de Event voironmousedown.
En sélectionnant du texte.
Objets concernés : text et Textarea.
Lors de l'initialisation du formulaire.
Objet concerné : form.
En envoyant le formulaire
Objets concernés : form
Lors du redimensionnement du fichier.
Objet concerné : window.
Lors du déplacement du fichier.
Objet concerné : window.
Lors d'un glisser-déposer vers la fenêtre.
Objet concerné : window.
Lorsqu'un lien est activé.
Objets concernés : Link