▼ 6. Évènements ▼

     ◄ Retour accueil

 

 
Évènements Javascript

Un évènement est une action d'un usager qui est susceptible d'enclencher l'exécution d'une portion de code. Ces actions peuvent être : appuyer sur une touche du clavier, sélectionner un item d'une liste, cliquer, déplacer le curseur de la souris, écrire dans un formulaire ou charger une page.
Les évènements peuvent s'insérer dans les balises HTML pour exécuter du code javascript ou en appeler une fonction.

Les évènements souris :
Ils sont déclenchés lorsque l'usager clique ou déplace le curseur de sa souris.
 
onclick l'usager clique une fois
ondblclick l'usager double-clique
onmousedown le bouton de la souris est enfoncé
onmouseup le bouton de la souris est relâché
onmouseover le curseur de la souris est au-dessus d'un élément
onmouseout le curseur de la souris quitte un élément
onmousemove détecte que le curseur est en mouvement

Les évènements clavier :
Ils sont déclenchés lorsque l'usager frappe une touche du clavier.
La touche enfoncée est indiquée dans l'objet window.event.keyCode
 
onkeydown l'usager appuie sur une touche
onkeyup l'usager relâche la touche

Les évènements de sélection :
Un élément sélectionné devient actif, ce qu'on appelle avoir le focus.  Le focus peut se déplacer grâce à la touche de tabulation (tab). Quand on évènement n'a plus le focus, il devient inactif ce qu'on appelle blur.
 
onfocus Signale quel élément possède le focus
onblur lorsqu'un élément perd le focus
onselect l'usager sélectionne un élément

Les autres évènements :
 
onchange appelé quand un élément est modifié
onload appelé au chargement d'une page
onunload appelé quand on ferme la page 
(faire actualiser ferme puis ouvre une page)
onabort appelé quand l'usager interrompt le chargement d'une page
onsubmit associé au bouton d'envoi d'un formulaire
onreset associé au bouton de réinitialisation d'un formulaire

Onclick - Ondblclick

Les évènements souris sont les plus utilisés sur Internet puisqu'ils sont intuitif pour l'usager. Ces évènements peuvent être associés à des boutons, liens, cases à cocher ou bouton radio. Un évènement entraîne l'exécution d'une partie de code JavaScript à l'intérieur de balises HTML.

Exemple onclick :

<form name="TestOnClick">
<input type="button" name="boutonTest" value="Voici le libellé"
onclick="document.TestOnClick.boutonTest.value='libellé après click';"/>
</form>


Bien sûr, ce code modifie le libellé du bouton après un click grâce à l'évènement onclick.
Cet évènement est constitué de deux actions : peser sur le bouton de la souris (onmousedown) et le relâcher (onmouseup). Ces deux parties peuvent être traitées individuellement mais doivent être accomplies toutes deux pour «créer» un onclick.

L'évènement ondblclick détecte tant qu'à lui, les double-cliques. Cet évènement peut être combiné à onclick pour faire en sorte qu'un même élément de l'interface d'une page, un bouton par exemple, puisse être utilisé de deux manière dépendamment de si on le clique ou le double-clique. Cependant, il n'est pas très standard de faire ceci, car il n'est pas intuitif pour un usager de double-cliquer dans une page Web et ceci pourrait diminuer la clarté de votre site. En plus, lors d'un appel de ondblclick, si un onclick est fournit, il sera lui aussi appelé puisqu'il l'est à chaque clique et qu'un double-clique comporte deux simples cliques.

Un usage plus normal de cet évènement serait d'utiliser sur la page des icônes traditionnel tels que «poste de travail», mais encore là c'est à éviter.

La syntaxe de ondblclick est similaire à celle de onclick et s'utilise de la même manière.

Boutons rollover

Un bouton rollover permet une certaine interaction avec l'usager en remplaçant une image par une autre lorsqu'il passe le curseur de sa souris au-dessus d'elle, puis que l'image d'origine réapparaisse lorsque le curseur quitte l'image. Pour ce faire, on doit utiliser les évènements onmouseover et onmouseout. Onmouseover change l'image source pour une nouvelle et onmouseout ramène l'image source. Ce procédé peut être utilisé avec plusieurs éléments.

Exemple :

<img src="forum.gif" onmouseover="document.images[0].src='forum2.gif';"
onmouseout="document.images[0].src='forum.gif';"/>


 

La balise HTML <p> qui indique le début d'un paragraphe accepte les évènements onmouseover et onmouseout ce qui vous permet d'exécuter du code lorsque le curseur passe au-dessus de texte ordinaire.

L'évènement onmousemove détecte que le curseur de la souris bouge sur l'écran. l'utilité de lui associer du code à exécuter est nébuleuse.. mais il permet de détecter si l'usager est actif sur son ordinateur.

Détecter une frappe de touche

Parfois on désire faire en sorte que l'usager puisse exécuter une partie de code simplement en appuyant sur une touche du clavier. On peut détecter la touche pressée grâce à l'événement onkeypress. On peut ensuite l'identifier à l'aide de l'objet window.event.keyCode.

Cet événement est utile puisqu'il permet à l'utilisateur de votre site d'y naviguer sans utiliser la souris. Certaines personnes n'aiment pas utiliser de souris et votre site saura alors les impressionner et leur faire plaisir.

Si on résume, onkeypress détecte le fait que l'usager a cliqué sur une touche.
window.event.keyCode, pour sa part, permet de détecter quelle touche a été pressée.

Exemple :

<body onkeypress="alert('Vous avez appuyé sur une touche!');">

Comme vous pouvez le voir, ce code fait en sorte d'afficher une boîte de message à chaque fois que l'usager appuie sur une touche.

Sachez qu'il est aussi possible d'utiliser onkeypress à l'intérieur de n'importe quel objet, champ de texte par exemple, et n'est donc actif que lorsque l'objet en question a le focus.

onkeypress se compose de onkeydown et onkeyup. Il faut que la personne est appuyé puis relâché la touche pour former la combinaison nécessaire à l'exécution de onkeypress. On peut traiter les touches séparément si c'est ce qu'on désire.

Afin d'afficher à l'écran la valeur des touches appuyées, il est possible d'utiliser fromCharCode.

Exemple :

var lettre= String.fromCharCode(event.keyCode);
alert("Vous venez de frapper la lettre " + lettre);

Vous pouvez essayer ce code sur cette page. 

Attribution du focus

Avoir le focus, signifie pour un élément d'une page Web, être le code actif. La touche de tabulation déplace le focus parmi les éléments d'une page Web. Le code HTML d'une page permet au webmestre d'établie l'ordre des focus, le «tab order». L'ordre par défaut du déplacement du focus est celui d'apparition des éléments dans la page mais on peut modifier cela grâce à l'attribut tabindex des objets.

Afin de détecter quel élément a le focus, on peut se servir de l'événement onfocus. onblur au contraire, détecte quel élément vient de perdre le focus.
On peut utiliser ces événements avec les balises <select>, <input/>, <textarea> et frameset.

Exemple :

<form name="qte">
Quantité du produit : <input type="text" name="qte" value="2" size="5">
</form>

<form name="prix">
Prix du produit : <input type="text" name="prix" value="22" size="5">$
</form>

<form name="total">
Total de l'achat : <input type="text" name="total" onfocus="value=qte.qte.value * prix.prix.value" size="5">$
</form>

Quantité du produit : 

Prix du produit : $

Total de l'achat : $

Cet exemple très ordinaire vous montre comment utiliser onfocus afin de calculer automatiquement le montant total d'une facture. Sitôt que le champ de total obtient le focus, il effectue une multiplication entre la quantité et le prix.

Chargement et déchargement de page

Au fur et à mesure que vous développez une page, son contenu se complexifie et ainsi augmente son temps de chargement, particulièrement pour les internautes qui naviguent par modem téléphonique. Lorsqu'une page prend beaucoup de temps à se charger, il arrive que les utilisateurs se questionnent sur ce qui se passe; ils se demandent si la page est totalement chargée, etc.

Il est possible d'utiliser l'événement onload pour indiquer à l'utilisateur que la page est chargée ou lui envoyer n'importe quel message de votre choix lorsqu'il arrive sur votre page. Cet événement s'utilise à l'intérieur de la balise <body>.

onload est pratique pour déterminer que tous les graphiques et objets de la page ont été chargés avec de commencer à exécuter les autres scripts de la page.

Exemple :

Ce code permet de mettre sur sa page un champ de texte qui inscrit que le chargement est en cours et change son texte pour chargement achevé lorsque c'est le cas.
<body onload="document.form1.texte.value='Chargement achevé';">
<form name="form1">
<input type="text" name="texte" size="30" value="Chargement en cours"/>
</form>
</body>

L'événement onunload fait évidemment le contraire, il exécute une partie de code lorsque l'usager quitte la page Web (ou la recharge). Plusieurs webmestres utilisent onload et onunload pour faire apparaître de petites fenêtre de style pop up de publicité au chargement et lors du départ de la page. Éviter d'utiliser une boîte d'alerte avec onunload puisqu'il ne sera pas apprécié par les visiteurs de devoir cliquer cette boîte afin de quitter la page.

Il est toujours possible pour un usager de cliquer lorsque la page se charge, le bouton arrêter de son navigateur. Cette action est détectable via l'événement onabort . On peut l'utiliser pour aviser l'utilisateur qu'il n'a pas chargé tous les évènements.

L'événement onerror détecte des erreurs lors du chargement des éléments. Lorsque le navigateur n'arrive pas à charger une image ou une page, onerror est appelé. En le captant, il est possible d'afficher un message à cet effet.

La méthode window.stop() permet de simuler la fonctionnalité des navigateurs qui permet d'avorter le chargement d'une page.

Comprendre l'évènement onerror

L'évènement onerror est appelé aussitôt qu'une erreur Javascript survient. On sait qu'une erreur Javascript est arrivé lorsqu'on voit le message d'erreur en popup dans notre navigateur ( ou bien l'icône jaune d'erreur au bas du navigateur). Lorsque cette boîte d'erreur est affichée, on peut voir que son titre est "The onerror event of the window object". Ce que cela signifie, c'est que l'évènement onerror est associé à l'objet window afin que toutes les erreurs d'une page soit repérées, même celles de la section <head>.

On sait qu'habituellement, les évènements, tels que onclick, sont appelés à l'intérieur de tag HTML. Cependant, onerror n'est pas inséré dans un tag puisqu'il n'existe pas de tag window. Les créateurs de javascript ont alors utilisé une autre manière pour déclarer cet évènement dont voici la syntaxe :

<script type='text/javascript'>
window.onerror = // fonction à exécuter lorsqu'il y a une erreur
</script>

Le code à la droite de l'appel de l'évènement doit obligatoirement être un appel de fonction par son nom sans les traditionnelles parenthèses.

Exemple :

// L'erreur javascript est que le document.write n'est pas bien fermé.
// Lors de l'erreur, la boîte standard d'erreur javascript apparaîtra,
//  mais la fonction affErreur sera également appelée, affichant un message en boîte d'alerte
<head>
  <script type='text/javascript'>
  function affErreur() {
      alert('Une erreur est survenue ! ');
  }
  window.onerror = affErreur;
  </script>
</head>
<body>
  <script>
  document.write('Bonjour'
  </script>
</body>

Remarquez l'emplacement de l'appel de l'évènement onerror. Il est déclaré avant les autres codes Javascript, défini dans les balises <head> et seul dans ses propres balises <script>. Cet emplacement est nécessaire afin de s'assurer qu'on capte toutes les erreurs de script à l'intérieur de la page.

Utiliser onerror afin de supprimer les erreurs Javascript

Afin de supprimer les erreurs Javascript, il suffit de créer une fonction qui ne fait que retourner la valeur true et d'associer cette fonction à l'évènement onerror.

Exemple  :

<script>
function supprimerErreurs() {
    return true;
}
window.onerror = supprimerErreurs;
</script>

Soyez prudents, car ce processus supprimera tous les messages d'erreurs, mais ne réparera pas les erreurs elles-mêmes ! Avant de débugger vos pages, assurez-vous de désactiver la fonction supprimerErreurs.

Informations des erreurs

Bien qu'il soit intéressant de supprimer les messages d'erreurs, il est important de comprendre ce qui arrive quand onerror est appelé, et utiliser cela pour créer des fonctions de gestion d'erreurs plus évoluées.

Tout d'abord, voyons ce que nous pouvons faire avec les informations que la boîte de message d'erreur par défaut nous offre. Habituellement, cette boîte de navigateur nous donne un message comme celui-ci  :

JavaScript Error: http://www.geocities.com/mystickjavascript/test.htm, line 8:
 missing ) after argument list.
document.write('hi there'
..........................^

Javascript conserve ces informations en 3 paramètres différents. Afin de pouvoir les récupérer, il suffit d'ajouter des paramètres à la fonctions appelée par onerror. Le premier paramètre sera toujours le message expliquant l'erreur, le second sera le URL de la page contenant l'erreur et le troisième sera le numéro de la ligne. Ainsi si vous ne voulez que le numéro de ligne vous devez créer tout de même les trois paramètres. Ces paramètres peuvent avoir n'importe quel nom.

Exemple :

<script>
function infoErreur(msg, url, ligne) {
    alert('Message = ' + msg + '\n  URL = ' + url + '\n  Numéro de ligne = ' + ligne);
    return true;
}
</script>

Maintenant que vous savez comment gérer l'évènement onerror, rien ne vous empêche de vous créer vos propres boîtes de messages d'erreurs en utilisant des petites fenêtres en popup ou bien de créer vos rapports d'erreurs en emmagasinant le détail des erreurs dans un vecteur pour ensuite en afficher le contenu.
Hosted by www.Geocities.ws

1