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

Ortho
(Ortho)
{{Programmation JavaScript}}
 
Les '''évènements javascript''' permettent d'intercepter les changements d'états de l'environementenvironnement provoqués par le document [[w:fr:HTML|HTML]], les [[w:fr:script|scripts]] ou l'interaction du client.
 
== L'objet Event ==
=== type ===
 
IndentiqueIdentique sous Internet Explorer.
 
Renvoie le type d'évènement (onkeydown, onload...).
=== target ===
 
'''EquivalentÉquivalent Internet Explorer :''' <tt>'''srcElement'''</tt>.
 
Permet de récupérer l'élément depuis lequel l'é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é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ènement à été rattaché. EquivautÉquivaut à utiliser la référence this qui fonctionne dans certain cas sous Internet Explorer.
 
=== stopPropagation ===
 
'''EquivalentÉquivalent Internet Explorer :''' l'attribut <tt>'''cancelBubble'''</tt>.
 
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.
=== preventDefault ===
 
'''EquivalentÉquivalent Internet Explorer :''' l'attribut <tt>'''event.returnValue''' = false</tt>.
 
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è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é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éfixpré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 éxisteexiste deux façons de définir les évènements :
 
'''1.''' Directement dans la balise de l'objet concerné :
</source>
}}
La commande peut aussi être une fonction que vous avez vous même définie utlérieurementultérieurement.
 
'''2.''' En associant une fonction via javaScript :
 
{{cadre code|Le même effet est obtenu différementdifféremment :|
<source lang="html4strict">
<FORM>
</source>
 
== EcouteursÉcouteurs 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Équivalent 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 sufixsuffixe "on" n'est requis que pour Internet Explorer.
* EventListener : la fonction appelé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 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ènement DOM-0.
 
{{cadre code|Lors de l'appuie sur le bouton "my_button", on affiche le type d'évènement la cible curantecourante et on efface l'écouteur de sorte à ce que cette action ne s'effectue qu'une seule fois.|
<source lang="javascript">
function clickMe(event)
=== removeEventListener ===
 
'''EquivalentÉ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).
 
== EvènementsÉvènements ==
 
=== onabort ===
if(navigator.appName === "Microsoft Explorer")
{
//On envoie un message avec la touche appuiéeappuyée pour Internet Explorer
alert(event.keyCode);
}
else
{
//On envoie un message avec la touche appuiéeappuyée pour Netscape
alert(event.which);
}
 
=== onkeypress ===
Lorsqu'on maintient une touche appuiéeappuyé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.
 
=== onunload ===
En quittant le fichier. L'objet Event ne subbitsubit pas la phase de bouillonementbouillonnement avec onunload.
 
'''Objet concerné''' : window.