« Programmation JavaScript/Évènement » : différence entre les versions

Explication de l'objet Event, et des gestionnaires dévènement + précisions et exemples
Aucun résumé des modifications
(Explication de l'objet Event, et des gestionnaires dévènement + précisions et exemples)
{{Programmation JavaScript}}
* '''onAbort'''
 
:en cas d'interruption
Les '''évènements javascript''' permettent d'intercepter les changements d'états de l'environement provoqués par le document [[w:fr:HTML|HTML]], les [[w:fr:script|scripts]] ou l'interaction du client.
* '''onBlur'''
 
:en quittant
== L'objet Event ==
* '''onChange'''
 
:après modification réussie
Lorsqu'un évènement survient, un objet Event permettant de le décrire est créé. Il se propage alors dans l'arbre [[w:fr:Document Object Model|DOM]] selon trois phases déterminées par la cible (l'objet depuis lequel l'évènement est intercepté) :
* '''onClick'''
* Capture : l'événement se propage de la racine du document (incluse) à la cible (exclue).
:en cliquant
* Cible : l'événement atteint la cible.
* '''onDblClick'''
* Bouillonnement : l'événement se propage dans le sens inverse : de la cible (exclue) à la racine du document (incluse).
:en double-cliquant
 
* '''onError'''
Cet objet a été défini par le [[w:fr:W3C|W3C]], mais malheureusement [[w:fr:Internet Explorer|Internet Explorer]] en a sa propre définition ce qui oblige le [[w:fr:développeur|développeur]] à tenir compte du [[w:fr:navigateur|navigateur]].
:en cas d'erreur
 
* '''onFocus'''
Certaines propriétés de cet objet concernent tout les types d'évènements et d'autres, tels que le bouton de la souris, sont spécifiques à un ou plusieurs évènements. Seuls les premières nous intéressent dans cette partie, nous verrons les autres dans la description des évènements.
:en activant
 
* '''onKeydown'''
=== type ===
:en appuyant sur une touche
 
* '''onKeypress'''
Indentique sous Internet Explorer.
:en maintenant une touche appuyée
 
* '''onKeyup'''
Renvoie le type d'évènement (onkeydown, onload...).
:en relâchant la touche
 
* '''onLoad '''
=== target ===
:en chargeant un fichier
 
* '''onMousedown'''
'''Equivalent Internet Explorer :''' '''srcElement'''.
:en maintenant la touche de souris appuyée
 
* '''onMousemove'''
Permet de récupérer l'élément depuis lequel l'évènement à été envoyer. 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é.
:en bougeant la souris
 
* '''onMouseout'''
=== currentTarget ===
:en quittant l'élément avec la souris
 
* '''onMouseover'''
Non supporté par Internet Explorer.
:en passant sur l'élément avec la souris
 
* '''onMouseUp'''
Permet de récupérer l'objet auquel l'évènement à été rattaché. Equivaut à utiliser la référence this qui fonctionne dans certain cas sous Internet Explorer.
:en relâchant la touche de souris
 
* '''onReset'''
=== stopPropagation ===
:en initialisant le formulaire
 
* '''onSelect'''
'''Equivalent Internet Explorer :''' l'attribut '''cancelBubble'''.
:en sélectionnant du texte
 
* '''onSubmit'''
Cette méthode arrête la propagation de l'événement dans l'arbre [[w:fr:Document Object Model|DOM]] 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.
:en envoyant le formulaire
 
* '''onUnload'''
=== preventDefault ===
:en quittant le fichier
 
* '''javascript:'''
'''Equivalent Internet Explorer :''' l'attribut '''event.returnValue''' = false.
:pour les liens
 
Empêche l'action normalement prévue de se dérouler. Par exemple, lors de l'appuie 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.
 
== Gestionnaires d'évènements DOM-0 ==
 
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ènement 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éfix "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 éxiste deux façons de définir les évènements :
 
'''1.''' Directement dans la balise de l'objet concerné :
 
{{cadre code|L'appuie sur le bouton "bt" envoie un message avec son id :|
<source lang="html4strict">
<FORM>
<INPUT type="button" id="bt" onclick="alert('Vous avez cliqué sur '+this.id+'.');">
</FORM>
</source>
}}
La commande peut aussi être une fonction que vous avez vous même définie utlérieurement.
 
'''2.''' En associant une fonction via javaScript :
 
{{cadre code|Le même effet est obtenu différement :|
<source lang="html4strict">
<FORM>
<INPUT type="button" id="bt" onclick="alert('Vous avez cliqué sur '+this.id+'.');">
</FORM>
</source>
La fonction javascript est définie après :
<source lang="javascript">
document.getElementById("bt").onclick = function(event)
{
alert("Vous avez cliqué sur "+this.id+".");
}
</source>
}}
 
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.
 
<source lang="javascript">
//Capture la touche de clavier enfoncée
document.onkeydown = function(event)
{
//Internet Explorer ne prend pas d'objet Event en paramètre, il faut donc aller le chercher dans l'objet window
if (typeof event == "undefined" ) event = window.event;
}
</source>
 
== Ecouteurs d'évènements ==
 
Il est possible d'intercepter le flux d'évènements dans l'arbre DOM avec des écouteur 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.
 
=== addEventListener ===
 
'''Equivalent Internet Explorer :''' '''detachEvent''';
 
Cette méthode crée un écouteur pour un objet HTML. Il prend trois paramètres :
* type : le type d'évènement. Le sufix "on" n'est recqui que pour Internet Explorer.
* EventListener : la fonction appellée lors de l'évènement.
* useCapture : <span style="color:#0000A0;">true</span> pour la phase de capture et <span style="color:#0000A0;">false</span> pour celles de la cible et du bouillonement. Ce paramètre n'est pas disponible sous Internet Explorer qui ne traîte que la cible et le bouillonement.
 
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.
 
{{cadre code|Lors de l'appuie sur le bouton "my_button", on affiche le type d'évènement la cible curante et on efface l'écouteur de sorte à ce que cette action ne s'effectue qu'une seule fois.|
<source lang="javascript">
function clickMe(event)
{
//this.id renvoie "undefined" : this n'est pas reconnu ici
alert("Type : "+event.type+"\nCible courante : "+this.id);
if(navigator.appName == "Microsoft Internet Explorer")
{
//Ne fonctionne pas : this n'est pas reconnu ici
this.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);
}
</source>
}}
 
=== removeEventListener ===
 
'''Equivalent Internet Explorer :''' '''detachEvent''';
 
Pour détruire un écouteur, il faut utiliser cette méthode avec les mêmes paramètres que addEventListener (ou detachEvent).
 
== Evènements ==
 
=== onabort ===
En cas d'interruption de chargement d'une image.
 
'''Objets concernés''' : Image.
 
=== onblur ===
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.
 
=== onchange ===
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.
 
=== onclick ===
Lors d'un clique de souris sur l'objet.
 
'''Objets concernés''' : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
 
=== ondblclick ===
Lors d'un double clique de souris sur l'objet.
 
'''Objets concernés''' : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
 
=== onerror ===
Survient lors d'une erreur de chargement.
 
'''Objets concernés''' : Image et window.
 
=== onfocus ===
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.
 
=== onkeydown ===
Lorsqu'on appuie sur une touche. Pour tous les évènements clavier, Event à pour attribut keyCode (Internet Explorer) ou which (Netscape) et contient le code de la touche enfoncée.
 
{{cadre code|Dans cet exemple un message envoie le code de la touche appuiée :|
<source lang="javascript">
document.onkeydown = function(event)
{
//On vérifie le navigateur
if(navigator.appName === "Microsoft Explorer")
{
//On envoie un message avec la touche appuiée pour Internet Explorer
alert(event.keyCode);
}
else
{
//On envoie un message avec la touche appuiée pour Netscape
alert(event.which);
}
}
</source>
}}
 
 
'''Objets concernés''' : document, Image, Link et TextArea.
 
=== onkeypress ===
Lorsqu'on maintient une touche appuiée. Pour tous les évènements clavier, Event à 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.
 
=== onkeyup ===
Lorsqu'on relâche sur une touche. Pour tous les évènements clavier, Event à 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.
 
=== onload ===
Lors du chargement de la page HTML, d'une frame ou d'une image.
 
'''Objets concernés''' : Image, Layer et window.
 
=== onunload ===
En quittant le fichier. L'objet Event ne subbit pas la phase de bouillonement avec onunload.
 
'''Objet concerné''' : window.
 
=== onmousedown ===
En maintenant une touche de la souris appuyée.
 
Les attributs de Event pour la souris sont les suivants :
* pageX (Netscape) ou x (Internet Explorer) : position horizontale de la souris. Sous Netscape, le défilement du document n'est pas pris en compte.
* pageY (Netscape) ou y (Internet Explorer) : position horizontale de la souris. Sous Netscape, le défilement du document n'est pas pris en compte.
* which (Netscape) ou button (Internet Explorer) : bouton de la souris enfoncé, relâché ou maintenu. Avec which, le clique gauche renvoie 1, le milieu renvoie 2 et le droit renvoie 3. Avec button (sous Internet Explorer), le clique gauche renvoie 0, le milieu renvoie 4 et le droit renvoie 2.
 
{{cadre code|Lorsque l'on clique avec la souris un message apparaît avec la position de la souris et le bouton cliqué : |
<source lang="javascript">
document.onmousedown = function(event)
{
//Netscape
if(navigator.appName != "Microsoft Internet Explorer")
{
alert(event.pageX+" - "+event.which);
}
//Internet Explorer
else
{
alert(window.event.x+" - "+window.event.button);
}
}
</source>
}}
 
'''Objets concernés''' : Button, document et Link.
 
=== onmouseUp ===
En relâchant une touche de la souris. Pour les attributs de Event voir [[#onmousedown|onmousedown]].
 
'''Objets concernés''' : Button, document et Link.
 
=== onmousemove ===
En bougeant la souris. Pour les attributs de Event voir [[#onmousedown|onmousedown]].
 
'''Objets concernés''' : window et document
 
=== onmouseout ===
En quittant l'élément avec la souris.
 
'''Objets concernés''' : Area, Layer et Link. Pour les attributs de Event voir [[#onmousedown|onmousedown]].
 
=== onmouseover ===
En passant sur l'élément avec la souris.
 
'''Objets concernés''' : Area, Layer et Link. Pour les attributs de Event voir [[#onmousedown|onmousedown]].
 
=== onselect ===
En sélectionnant du texte.
 
'''Objets concernés''' : text et Textarea.
 
=== onreset ===
Lors de l'initialisation du formulaire.
 
'''Objet concerné''' : form.
 
=== onsubmit ===
En envoyant le formulaire
 
'''Objets concernés''' : form
 
=== onresize ===
Lors du redimensionnement du fichier.
 
'''Objet concerné''' : window.
 
=== onmove ===
Lors du redimensionnement du fichier.
 
'''Objet concerné''' : window.
 
=== dragdrop ===
Lors d'un glisser-déposer vers la fenêtre.
 
'''Objet concerné''' : window.
 
=== javascript ===
Lorsqu'un lien est activé.
 
'''Objets concernés''' : Link
5

modifications