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

Correction de multiples fautes : évènements -> événements, javascript -> JavaScript, javaScript -> JavaScript.
(→‎Évènements : -> Événement)
(Correction de multiples fautes : évènements -> événements, javascript -> JavaScript, javaScript -> JavaScript.)
[[Programmation JavaScript/Sommaire|<< Retour au sommaire détaillé]] / [[Programmation_JavaScript/Objets_prédéfinis|Objets prédéfinis >>]]
 
Les '''événements javascriptJavaScript''' permettent d'intercepter les changements d'états de l'environnement provoqués par le document [[w:fr:HTML|HTML]], les [[w:fr:script|scripts]] ou l'interaction du client.
 
== L'objet Event ==
 
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ènementl’événement est intercepté) :
* Capture : l'événement se propage de la racine du document (incluse) à la cible (exclue).
* Cible : l'événement atteint la cible.
* Bouillonnement : l'événement se propage dans le sens inverse : de la cible (exclue) à la racine du document (incluse).
 
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]].
 
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événements. Seuls les premières nous intéressent dans cette partie, nous verrons les autres dans la description des évènementsévénements.
 
=== type ===
Identique sous Internet Explorer.
 
Renvoie le type d'évènementd’événement (onkeydown, onload...).
 
=== target ===
'''Équivalent Internet Explorer :''' <tt>'''srcElement'''</tt>.
 
Permet de récupérer l'élément depuis lequel l'évènementl’événement à é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é.
 
=== currentTarget ===
Non supporté par Internet Explorer.
 
Permet de récupérer l'objet auquel l'évènementl’événement à été rattaché. Équivaut à utiliser la référence this qui fonctionne dans certain cas sous Internet Explorer.
 
=== stopPropagation ===
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 <tt>"return false;"</tt> (sauf pour Internet Explorer) qui est mieux supportée.
 
== Gestionnaires d'évènementsd’événements DOM-0 ==
 
Chaque événement peut être capté par les objets HTML concernés en leurs associant une fonction ou une commande javascriptJavaScript. Nous verrons plus loin comment fonctionnent les écouteurs (gestionnaires d'événements DOM-2). Ici nous utiliserons le type de gestionnaire d'évènementd’événement DOM-0, plus simple et plus fiable : les événements sont des méthodes (le nom de l'évènementl’é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 :
La commande peut aussi être une fonction que vous avez vous même définie ultérieurement.
 
'''2.''' En associant une fonction via javaScriptJavaScript :
 
{{cadre code|Le même effet est obtenu différemment :|
== Écouteurs d'événements ==
 
Il est possible d'intercepter le flux d'évènementsd’événements dans l'arbre DOM avec des écouteur d'évènementsd’é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ènementd’événement DOM-2.
 
=== addEventListener ===
 
Cette méthode crée un écouteur pour un objet HTML. Il prend trois paramètres :
* type : le type d'évènementd’événement. Le suffixe "on" n'est requis que pour Internet Explorer.
* EventListener : la fonction appelée lors de l'évènementl’é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 bouillonnement. Ce paramètre n'est pas disponible sous Internet Explorer qui ne traite que la cible et le bouillonnement.
 
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ènementd’événement DOM-0.
 
{{cadre code|Lors de l'appuie sur le bouton "my_button", on affiche le type d'évènement la cible courante et on efface l'écouteur de sorte à ce que cette action ne s'effectue qu'une seule fois.|
 
=== onkeypress ===
Lorsqu'on maintient une touche appuyée. Pour tous les évènementsé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é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.
Utilisateur anonyme