Fiche Javascript : Gestions des évènements

Objet de la fiche

État de la fiche

Plan de la fiche :

• | Avant propos |
• | Généralités |
• | Les scrutateurs d'évènements |
• | Méthode par attributs |
• | Méthode par Listener |
• | Evénements principaux de la souris |
• | Evénements principaux du clavier |
• | Autres évènements |
• | Application au projet de site Web |

Avant propos

Cette fiche est très importante afin de bien comprendre les différentes méthodes mises à votre disposition pour rendre votre site interactif en réponses à divers évènements.

Généralités

Les évènements javascript permettent d'intercepter les changements d'états de l'environnement provoqués par le document HTML, les scripts ou l'interaction du client. 

Principe

Le concepteur d'une page HTML devra prévoir dans sa page des scrutateurs d'évènements (1) et les scripts à exécuter (5) lorsque les scrutateurs d'évènement seront activés par des changements d'états de l'environnement provoqués par le document HTML, les scripts ou l'interaction du client (2).

 Un scrutateur d'évènement activé génère dynamiquement un objet évènement (3) dont les propriétés (4) pourront être exploitées par le script (5).

Phases

Pour qu'un évènement sur un élément HTML puisse être détecté il faut en premier lieu attacher un scrutateur d'évènement sur cet élément. Cet élément peut être n'importe quel élément HTML tels que img, form, input, a etc.

(1) : Un évènement est détecté par le scrutateur d'événement attaché à l'élément (5) : pour notre exemple en va considérer que  l'évènement onclick sera attaché à une image (<img>) : on clique sur l'image et il se passe quelque chose comme par exemple l'apparition d'une bordure.

(2) : Cet évènement étant relatif à la fenêtre Web, un objet event est crée au niveau de la fenêtre Web active. Cet objet, suivant son origine peut contenir des informations spécifiques comme par exemple le code d'une touche du clavier ou le numéro du bouton de la souris..

(3) et (4) : L'objet event et se propage dans tout l'arbre du DOM (chemin rouge) à partir de la racine du document (incluse) jusqu'au noeud (ou son enfant direct) à l'origine de l'action qui a déclenché l'évènement (la cible). On appelle cela la phase de Capture. Dans cette phase la cible est exclue.

(5) : L'objet évènement atteint la cible et récupère les information qui lui sont associées. On appelle cela la phase Cible

(6) : L'objet évènement se propage dans le sens inverse  (chemin bleu) : de la cible (exclue) à la racine du document (incluse). Cette phase s'appelle la phase de Remontée d'évènements ou Bouillonnement ou encore diffusion. A l'issue de cette phase l'objet, et toutes ses propriétés, peut alors être exploité par des scripts javascript.

En bref l'objet event , après sa création lors de l'apparition d'un évènement,  se propage alors dans l'arbre DOM selon trois phases déterminées par la cible (l'objet depuis lequel l'é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).

Propriétés de l'objet Évènement

Cet objet a été défini par le W3C, mais malheureusement Internet Explorer en a sa propre définition ce qui oblige le développeur à tenir compte du 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.

Internet Explorer	Autres navigateurs	Commentaires
srcElement	target	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é. Une fois que l'objet a été récupéré on peut disposer de ses caractéristiques, les propriétés de style, etc.
	currentTarget	Permet de récupérer l'objet auquel l'évènement à été rattaché. Équivaut à utiliser la référence this qui fonctionne dans certain cas sous Internet Explorer.
cancelBubble	stopPropagation	Cette méthode arrête la propagation de l'événement dans l'arbre 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.
event.returnValue = false	preventDefault	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.
clientX et clientY	clientX et clientY	Positionne ou récupère les coordonnées X et Y du pointeur de la souris, relatives à la fenêtre utile Web, hors ascenseurs, barre d'outils, de menu etc.
button	which	Cette propriété ne s'applique  qu'aux événements se rapportant aux boutons de la souris. Elle contient le numéro du bouton de la souris qui a été pressé. Malheureusement ces valeurs sont différentes suivant le navigateur. Voici la valeur de cette propriété selon les différents modèles existants. Bon courage si vous voulez les tester. Norme officielle W3C Microsoft Firefox Opera Bouton gauche 0 1 1 1 Bouton milieu 1 4 2 3 Bouton droite 2 2 3 2
	detail	Cette propriété ne s'applique  qu'aux événements se rapportant aux boutons de la souris. La propriété  contient le nombre de fois que le bouton a été cliqué rapidement en séquence. Elle permet de tester des clics simples, doubles ou triples. Bien entendu, si vous ne souhaitez tester que les double-clics, vous pouvez plutôt utiliser l'événement dblclick. L'événement click sera lancé dès le premier clic, puis de nouveau pour le second clic, puis pour le troisième clic, tandis que l'événement dblclick ne sera lancé que pour un double-clic. detail ne fonctionne pas sous IE. Les navigateurs donnent des résultats différents et l'exploitation des résultats se révèle aléatoire. Donc attention si vous désirez utiliser ces propriétés.

Exemple

Remarques sur le code

Dans body les éléments HTML imbriqués <table> <div> <div> <p> <img /> , <b> </b> </p> </div> </div> </table> sont tous affectés du scrutateur d'évènement onclick qui active la fonction info(event, 'Click sur table', true).

function info(e,_info,_fin) reçoit la référence de l'objet even crée à l'occasion de l'appui sur la touche click, un commentaire et l'information _fin qui peut être false (remontée en cours) ou true dernière balise HTML atteinte lors de la remontée.

Dans la fonction info()  evt  spécifie la référence de l'objet even : la syntaxe est étudiée ci dessous dans la "méthode par attributs"

  _obj = evt.srcElement pour Internet Explorer ou  _obj = evt.currentTarget pour les autres navigateurs spécifie l'élément (table, div, p ou b) et permettent d'exploiter ses propriétés comme le donnent les exemples proposés :

• _col= _obj.style.backgroundColor; pour récupérer la couleur d'arrière plan de l'élément.
• _width = _obj.style.width; pour récupérer la largeur de l'élément.
• _tagName = _obj.tagName; pour récupérer le nom de l'élément.
• _parentNode = _obj.parentNode; pour récupérer l'identification du noeud précédent.

Les scrutateurs d'évènements

Quand le DOM apporte l'interactivité

Le DOM est le modèle d'objets qui permet d'accéder aux éléments constitutifs d'une page. Il n'est pas en lui-même interactif. Pour créer des pages interactives, nous devrons détecter les événements susceptibles d'affecter un objet (un clic sur un lien, une image, une pression sur une touche du clavier, etc.) et leur associer des comportements.

Chaque événement a un nom, par exemple, mousemove est le nom de l'événement qui est déclenché quand l'utilisateur passe la souris au-dessus d'un élément d'interface utilisateur. Le tableau suivant donne une liste non exhaustive des évènements pouvant être observés.

Méthode de scrutation par attributs

Il y a 2 méthodes pour attacher un scrutateur d'événement à un élément.

• La première dite par attributs  utilise les attributs avec un script comme valeur.
• La seconde utilise la méthode addEventListener d'un élément.

Nous allons voir ici la méthode par attributs

L'utilisation de la méthode par attribut  est une manière commune pour la plupart des événements et elle est simple à écrire mais ne peut gérer les événements qu'en phase de diffusion. Cette méthode a deux désavantages principaux :

• Les événements sont intégrés dans le langage, de telle sorte que pour ajouter un nouvel événement, on doit procéder à des changements dans le langage,
•  Les événements sont  mélangés avec le contenu du document, les spécifications de script et de gestion d'événement, au lieu de  permettre leur séparation.

Chaque évènement peut être capté par les éléments HTML concernés en leurs associant une fonction ou une commande javascript. 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.

Plusieurs types d'évènements peuvent être captés par un même élément HTML et plusieurs actions différentes peuvent être déclenchées.

Définir les évènements et les actions directement dans l'attribut concerné.

Syntaxe : sur Évènement = "action" . Exemple onmouseover=" action"

Exemple 1

	L'appuie (évènement onclick) sur le bouton "Bouton 1" (attribut input) envoie un message(boite alert).

Exemple 2

	L'appui sur le Bouton1 (évènement onclick) va déclencher la modification du texte du bouton 2  puis changer la couleur de ce texte en rouge. L'appui sur le Bouton 2 va  rétablir le tout aux valeurs initiales. Un évènement onkeypress est aussi défini sur le bouton 1 : lorsque celui est sélectionné, l'appui sur un touche quelconque du clavier va générer un message alert.

Définir les évènements dans l'attribut concerné et les actions dans une fonction externe.

Au survol de l'image on récupère les coordonnées du pointeur. Internet Explorer et les autres navigateurs ne gèrent pas de la même façon l'objet event. Pour la majorité des navigateurs, l'objet event est passé en paramètre à la fonction qui gère l'événement, pour IE c'est un objet global window.event. Nous allons utiliser les propriétés relatives à l'événement .clientX et .clientY qui donnent la position du curseur au moment où l'événement a été effectué. L'origine est le coin haut gauche de la zone de contenu de la fenêtre de votre navigateur.

Remarques sur le code

Les évènements onmousemove (mouvement du curseur sur l'attribut) et onmouseout (mouvement du curseur hors de l'élément) sont intégrés à l'attribut <img>

onmousemove fait appel à une fonction externe (infoCursor(event)) pour gérer et afficher les coordonnées du curseur.

Avec Internet Explorer l'objet event est disponible sous forme d'une variable globale window.event, alors qu'avec les autres navigateurs cet objet est passé directement et automatiquement en paramètre de la fonction.

Du fait de cette différence la ligne var evt = typeof window.event != 'undefined' ? window.event : e; permet de créer la variable  evt qui va prendre la valeur window.event si le type window.event est différent de undefined (cas Internet Explorer) ou la valeur e image de event transmis à la fonction (cas des navigateurs différents de IE).

evt représente alors la référence de l'évènement à laquelle on va appliquer les propriétés .clientX et clientY pour afficher les coordonnées du curseur lors du survol de l'image.

Définir les évènements  et les actions dans une fonction externe.

Des méthodes de scrutation par attribut, celle ci est certainement la plus propre car les événements ne sont  pas mélangés avec le contenu du document.

Remarques sur le code

Les évènements sont référencés par rapport à l'identificateur de l'attribut sur lequel on veut qu'ils s'appliquent. Ici il s'agit d'une image avec pour référence id="AttrImgMoveDblClick".

La déclaration des scrutateurs d'évènements se fait dans la fonction générale EventOnLoad() qui n'est appelée que lorsque l'évènement onload (<body onload="EventOnLoad()">) survient : cela signifiant que la totalité de la page est chargée. En effet il est impératif de savoir si l'ensemble de la page est chargée avant d'effectuer des opérations relatives à l'identificateur de l'attribut sur lequel on veut que les scrutateurs s'appliquent car sinon var x = document.getElementById("AttrImgMoveDblClick"); générerait une erreur, l'objet identifié par AttrImgMoveDblClick n'étant pas encore chargé par le flux.

Sur la base de l'objet image on va pouvoir affecter les différents types de scrutateurs comme par exemple x.onmousemove auquel on va affecter une action à réaliser par la fonction _On(e).

Comme dans l'exemple précédemment l'objet event est disponible sous forme d'une variable globale window.event pour Internet Explorer, alors qu'avec les autres navigateurs cet objet peut être passé directement et automatiquement en paramètre de la fonction. On retrouve donc la syntaxe pour fonctionner correctement avec l'ensemble des navigateurs : var evt = typeof window.event != 'undefined' ? window.event : e;

Utilisation de this
this est un mot clé de javascript compris par tous les navigateurs modernes qui permet de récupérer l'objet auquel l'évènement à été rattaché. Pour récupérer les propriétés de l'objet la syntaxe s'en trouve simplifiée : this.width pour la largeur, this.height pour la hauteur etc.

Nota : Une deuxième forme d'écrire du code aurait consister à mettre dans la fonction EventOnLoad() uniquement la déclaration des scrutateurs et de mettre les fonctions correspondantes aux actions en d'hors. Cette méthode peut apporter un peu plus de clarté au code en séparant les diverses fonctions, mais le propos principal de ce Nota était la syntaxe d'appel à la fonction correspondante à l'action qui s'écrit sans (): x.onmousemove = _On; .

Méthode de scrutation par addEventListener

Cette méthode peut gérer les évènements dans toutes les phases et peut aussi être utilisée pour attacher plusieurs scrutateurs d'événements à un élément. Cette possibilité d'ajouter des écouteurs d'événements tout au long du flux d'événements s'avère particulièrement utile lorsqu'un composant d'interface comprend plusieurs objets. Par exemple, un objet bouton contient souvent un objet texte qui sert de libellé au bouton. Sans la possibilité d'ajouter un écouteur au flux d'événements, il faudrait en ajouter un à l'objet bouton et un à l'objet texte pour être sûr d'être averti des événements de clic survenant à tout endroit du bouton. Le flux d'événements vous permet, au contraire, de placer un seul écouteur d'événements sur l'objet bouton afin de gérer les événements de clic, qu'ils se produisent sur l'objet texte ou sur des zones de l'objet bouton non couvertes par l'objet texte. Cette méthode qui sépare les évènements du contenu de la page HTML est à privilégier pour la conception de sites modernes.

Mise en oeuvre du scrutateur d' évènements

Pour assigner un événement en javascript, on doit tout d'abord récupérer l'objet  qui correspond à la balise html ou (x)html sur laquelle vous voulez appliquer l'événement. Ensuite pour affecter un scrutateur à cet objet et comme Internet Explorer ne fait pas les choses comme tout le monde nous seront obligés d'utiliser 2 méthodes :

La méthode addEventListener(NomEvenement,FonctionMonAction,typePropagation) associée aux navigateurs autres que Internet Explorer et la méthode attachEvent(NomEvenement,FonctionMonAction) associée à Internet Explorer uniquement.

Syntaxe générale

Soit var MonObjet = document.getElementById('MonAttribut') la référence de l'objet sur lequel on désire mettre en oeuvre un scrutateur d'évènement.

Pour IE : MonObjet.attachEvent(NomEvenement,FonctionMonAction)
et  : MonObjet.addEventListener(NomEvenement,FonctionMonAction,typePropagation) pour les autres navigateurs.

Méthode addEventListener

Syntaxe : addEventListener(NomEvenement,FonctionMonAction,typePropagation)

• NomEvenement est une valeur de type String qui spécifie le nom de l'événement, sans le "on" en préfixe, exemple mousemove.
• FonctionMonAction est le nom de la fonction sans les "()" qui va traiter l'événement,
• typePropagation détermine comment le scrutateur va travailler : en phase capturing (true)  ou en phase bubbling (false). Le meilleur choix est d'utiliser false. (voir explications ci dessous).

Nota typePropagation : Le problème de base est très simple. Soit deux éléments imbriqués : <a id=...>      <img id=........></a> imaginons que l'on ait activé la supervision du click à la fois sur l'élément <a> et sur l'élément <img>. Si l'internaute clique sur l'élément <img> cela provoque un évènement click à la fois sur l'élément <img> et sur l'élément <a> car <img> est inclu dans <a>. La question est alors sur quel élément va s'appliquer l'action résultante (nomFonction) de l'évènement click?.

Le navigateur Netscape dit que c'est la fonction appliquée à l'évènement <a> qui sera activée en premier : on appelle cela travailler en phase capturing. Le navigateur Internet Explorer dit que c'est la fonction appliquée à l'élément <img> qui sera activé en premier : on appelle cela travailler en phase bubbling.

Méthode attachEvent

Syntaxe : attachEvent(NomEvenement,FonctionMonAction)

• NomEvenement est une valeur de type String qui spécifie le nom de l'événement avec le préfixe "on" : exemple onmousemove.
• nomFonction est le nom de la fonction sans les "()" qui va traiter l'événement.

Fusion des méthodes addEventListener et attachEvent

Modes d'application avec addEventListener

• Appliqué à un élément
  • element.addEventListener("click", function(){ alert("Bonjour"); });
  • element.addEventListener("click", maFontion);
    function maFontion() { alert ("Bonjour"); }
    
• Plusieurs évènements sur un même élément
  • element.addEventListener("mouseover", maFontion1);
  • element.addEventListener("click", maFontion2);
  • element.addEventListener("mouseout", maFontion3);
  
  
• Avec des paramètres passés à la fonction

  element.addEventListener("click", function(){ maFontion(p1, p2); });

  
  
• Avec le type de propagation

  element.addEventListener("click", myFunction, true);

• Avec la remontée d'un évènement
  element.addEventListener('error', function(e){Event_errMessage(e);}, true); function Event_errMessage(e){ // Exemple remontée erreur media audio ou vidéo switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED: alert('Lecture du media interrompu.'); break; case e.target.error.MEDIA_ERR_NETWORK: alert('Interruption média : problèmes réseau.'); break; case e.target.error.MEDIA_ERR_DECODE: alert('Interruption média : corruption des données transférées ou fonctionnalités non supportée par le navigateur.'); break; case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: alert('Interruption média : le média ne peut être chargé soit à cause de problèmes serveur ou réseau, soit que le format n\'est pas supporté.'); break; default: alert('Interruption média : Erreur non reconnue.'); break; } <br />}

Exemple

Un scrutateur d'évènement pour les évènements doubleclick est attaché à une image. Un message est affiché dans une boite alert lorsque survient cet évènement.

Gestion du scrutateur d' évènements

Netscape (Mozilla,Firefox) et Internet Explorer ne gèrent pas de la même façon l'objet event. Pour le premier, l'objet event est passé en paramètre à la fonction qui gère l'événement, pour le second c'est un objet global window.event.

Supprimer un scrutateur d'événements

Exemple général

Evénements principaux de la souris

Généralités

Il existe plusieurs événements pouvant être employés pour gérer les actions de la souris. Ces événements peuvent être définis indépendamment pour différents éléments de la page : bloc, paragraphe, images, liens, body etc...

• click : appelé lorsque la souris est appuyée puis relâchée sur un élément.
• dblclick : appelé lorsque la souris est double-cliquée.
• mousedown : appelé lorsqu'un bouton de la souris est pressé. Le gestionnaire d'événement est appelé aussitôt que le bouton de la souris est appuyé, avant même qu'il ne soit relâché.
• mouseup : appelé lorsque la souris est relâchée sur un élément.
• mouseover : appelé lorsque le pointeur de la souris survole un élément.
• mousemove : appelé lorsque le pointeur de la souris se déplace au-dessus d'un élément. L'événement étant appelé à chaque déplacement de la souris, vous devriez éviter de faire appel à ce gestionnaire pour des tâches trop longues.
• mouseout : appelé lorsque le pointeur de la souris quitte un élément.

Note 1 : En général mousedown et mouseup sont plus souvent utilisés que click. En effet certains navigateurs n'autorisent pas de lire la propriété button de l'objet click.

Note 2 : Il existe également un jeu d'événements relatifs au glisser / coller, qui intervient lorsque l'utilisateur maintient le bouton de la souris enfoncé et déplace la souris. Ces événements feront l'objet d'un chapitre spécifique car le glissé/collé peut apporter un plus certain à votre site.

Propriétés des événements de position de la souris

Tous les événements de la souris disposent des propriétés contenant les coordonnées de la position de la souris lors du déclenchement de l'événement. Il y a deux jeux de coordonnées. Le premier jeu définit les propriétés screenX et screenY mesurées depuis le coin supérieur gauche de l'écran. Le second jeu, clientX et clientY, est calculé à partir du coin supérieur gauche du document.

Propriétés des événements des boutons de la souris

Lorsqu'un événement sur un bouton de la souris se produit, on dispose d'un certain nombre de propriétés supplémentaires pour déterminer quels boutons ont été pressés ainsi que  la position du pointeur de la souris. La propriété button (pour Internet explorer), ou which (pour les autres navigateurs) de l'évènement 'event' peut être utilisée pour déterminer quel bouton a été pressé, avec les valeurs possibles de 0 pour le bouton de gauche, 1 pour le bouton de droite, et 2 pour le bouton du milieu. Si vous avez configuré votre souris différemment, ces valeurs peuvent être différentes. Comme signalé à la note 1 ci dessus évitez d'utiliser button avec l'évènement click.

La propriété detail est à éviter.

Mise en oeuvre du scrutateur d' évènements

Gestion des propriétés des évènements de position de la souris

Netscape (Mozilla,Firefox) et Internet Explorer ne gèrent pas de la même façon l'objet event. Pour le premier, l'objet event est passé en paramètre à la fonction qui gère l'événement, pour le second c'est un objet global window.event.
L'objet event regroupe un ensemble de propriétés relatives à l'événement : event.clientX et event.clientY
Ces deux propriétés donne la position du curseur au moment où l'événement a été effectué. L'origine est le coin haut gauche de la zone de contenu de la fenêtre de votre navigateur.

Afin de tenir compte des contraintes liées aux navigateurs le code javascript pour, par exemple récupérer les coordonnées du curseur avec  l'évènement mousemove,  sera de la forme :

La fonction getElementById() retourne l'élément ayant un identifiant id, dans notre cas, l'image. La fonction addEventListener() est appelée pour ajouter un nouveau scrutateur d'événement en phase de capture. Le premier argument est le nom de l'événement à scruter. Le deuxième argument est la fonction du scrutateur d'événement qui sera appelée quand l'événement se produira. Enfin, le dernier argument devra être true pour les scrutateurs en phase de capture. Vous pouvez également scruter durant la phase de diffusion en donnant la valeur false au dernier argument. La fonction scrutateur d'événement passée comme deuxième argument devra avoir un argument, l'objet 'event', comme vous le voyez dans la déclaration  ci-dessus (function MouseMoveXY(event) ). Si la fonction addEventListener n'est pas valide pour le navigateur, la méthode attachEvent sera utilisée.

Attacher un texte d'explication  lors du survol d'un élément par le curseur.

Attacher une image qui se déplace à coté du curseur.

Créer une fonction qui donne les coordonnées XY du curseur.

La fonction donne les coordonnées du curseur (et tient compte des déplacements des ascenceurs) lorsque l'on clique sur l'élément.

Click droit et menu contextuel.

Cet exemple n'a de sens que si vous voulez maitriser complètement le menu contextuel. L'exemple suivant permet d'afficher un menu contextuel personnalisé en fonction de l'élément sur lequel on a activé le click droit.

Evénements principaux du clavier

Les évènements

Les évènements disponibles du clavier sont les suivants :

• onkeypress(¹) : lorsqu'une touche est activée,
• onkeydown(²) : lorsqu'une touche est enfoncée,
• onkeyup(²) : lorsqu'une touche est 'relevée'.

Nota¹ :

• Cet événement ne capte pas les touches de contrôle comme Ctrl, Alt, Shift et autres touches de ce genre.
• Sa grande utilité réside dans sa détection de combinaisons de touches. Par exemple dans la combinaison Shift + A, l'événement onkeypress détectera bien un A majuscule alors que les événements onkeyup et onkeydown se déclencheront deux fois : une fois pour la touche Shift et une deuxième fois pour la touche A.

Nota² :

• Les événements onkeyup et onkeydown sont conçus pour capter n'importe quelles frappes de touches (aussi bien l'appui sur la touche A que sur la touche Ctrl ou ALT). La différence entre ces deux événements se situe dans l'ordre de déclenchement : onkeyup se déclenche au relâchement d'une touche, tandis que onkeydown se déclenche au moment de l'appui sur la touche.
• Attention : avec ces deux événements toutes les touches retournant un caractère retourneront un caractère majuscule, que la touche Maj soit pressée ou non.

getModifierState(keyArg) méthode principale de l'objet event appliqué au clavier

Cette methode retourne un boolean correspondant à l'état courant de la touche spécifiée en paramètre. Réponse = true si la touche est pressée ou verrouillée (verrouillage majuscule/minuscule) , false dans les autres cas.

Exemple pour savoir si la touche de verrouillage majuscule/minuscule est active ou pas, on testera de la façon suivante : if(event.getModifierState('CapsLock')) faire ceci sinon faire cela.

Propriétés principales de l'objet event appliqué au clavier

L'objet event est passé à travers la fonction appelée sur l'objet en question.

Ses propriétés relatives au clavier sont les suivantes :

• altKey : indique si la touche ALT du clavier est activé. Retourne une valeur booléenne qui signale si la touche 'ALT' est active (true) ou non (false).
• shiftKey: indique si la touche SHIFT est activé. Retourne une valeur booléenne.
• ctrlKey: indique si la touche CTRL est activé. Retourne une valeur booléenne qui signale si la touche 'CTRL' est active (true) ou non (false)
• repeat: indique si une touche est activée en permanence (appui continu). Retourne une valeur booléenne.
• code : Représente la clé physique sur le clavier indépendemment du caractère retourné non altérée par le type (qwerty, azerty ...) ou des réaffectation de touches.
• key : Retourne la véritable valeur correspondante à la clé pressée sur le clavier de l'utilisateur en tenant compte de l'interaction avec les touches de contrôle (shift, alt, ctrl...) et de la configuration locale du clavier (qwerty, azerty ..).

Codes Clavier

Le langage Javascript associe à chaque touche du clavier un code numérique. Ainsi toute série de touches (et donc de lettres) peut être encodée avec des nombres.

Exemple

Autres évènements

Application au projet de site web