Que sont les événements ?

Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non. Par exemple, on peut faire apparaître une fenêtre alert() lorsque l'utilisateur survole une zone d'une page Web.

« Zone » est un terme un peu vague, il vaut mieux parler d'élément (HTML dans la plupart des cas). Ainsi, vous pouvez très bien ajouter un événement à un élément de votre page Web (par exemple, une balise<div>) pour faire en sorte de déclencher un code Javascript lorsque l'utilisateur fera une action sur l'élément en question.

La théorie

Liste des événements

Il existe de nombreux événements, tous plus ou moins utiles. Voici la liste des événements principaux, ainsi que les actions à effectuer pour qu'ils se déclenchent :

Il a été dit précédemment que les événements mousedown et mouseup se déclenchaient avec le bouton gauche de la souris. Ceci n'est pas tout à fait exact, ces deux événements peuvent se déclencher avec d'autres boutons de la souris comme le clic de la molette ou le bouton droit. Cependant, cela ne fonctionne pas avec tous les navigateurs comme Firefox qui a choisi de bloquer cette possibilité. L'utilisation de ces deux événements se limite donc généralement au bouton gauche de la souris.

Toutefois, ce n'est pas tout, il existe aussi deux événements spécifiques à l'élément <form>, que voici :

Tout cela est pour le moment très théorique, nous ne faisons que vous lister quelques événements existants, mais nous allons rapidement apprendre à les utiliser après un dernier petit passage concernant ce qu'on appelle le focus.

Retour sur le focus

Le focus définit ce qui peut être appelé le « ciblage » d'un élément. Lorsqu'un élément est ciblé, il va recevoir tous les événements de votre clavier. Un exemple simple est d'utiliser un <input> de type text : si vous cliquez dessus alors l'input possède le focus. Autrement dit : il est ciblé, et si vous tapez des caractères sur votre clavier vous allez les voir s'afficher dans l'input en question.

Le focus peut s'appliquer à de nombreux éléments, ainsi, si vous tapez sur la touche Tabulation de votre clavier alors que vous êtes sur une page Web, vous allez avoir un élément de ciblé ou de sélectionné qui recevra alors tout ce que vous tapez sur votre clavier. Par exemple, si vous avez un lien de ciblé et que vous tapez sur la touche Entrée de votre clavier alors vous serez redirigé vers l'URL contenue dans ce lien.

La pratique

Utiliser les événements

Bien, maintenant que vous avez vu le côté théorique (et barbant) des événements, nous allons pouvoir passer un peu à la pratique. Toutefois, dans un premier temps, il n'est que question de vous faire découvrir à quoi sert tel ou tel événement et comment il réagit, nous allons donc voir comment les utiliser sans le DOM, ce qui est considérablement plus limité.

Bien, commençons par l'événement click sur un simple <span> :

Comme vous pouvez le constater, il suffit de cliquer sur le texte pour que la boîte de dialogue s'affiche. Afin d'obtenir ce résultat nous avons ajouté à notre <span> un attribut contenant les deux lettres « on » et le nom de notre événement « click » ; nous obtenons donc « onclick ».

Cet attribut possède une valeur qui est un code Javascript, vous pouvez y écrire quasiment tout ce que vous souhaitez, mais tout doit tenir entre les guillemets de l'attribut.

Le mot-clé this

Ce mot-clé n'est, normalement, pas censé vous servir dès maintenant, cependant il est toujours bon de le connaître pour les événements. Il s'agit d'une propriété pointant sur l'objet actuellement en cours d'utilisation. Donc, si vous faites appel à ce mot-clé lorsqu'un événement est déclenché, l'objet pointé sera l'élément qui a déclenché l'événement. Exemple :

Ce mot-clé ne vous servira, dans l'immédiat, que pour l'utilisation des événements sans le DOM ou avec le DOM-1. Si vous tentez de vous en servir avec le DOM-2 vous risquez alors d'avoir quelques problèmes avec Internet Explorer ! Nous étudierons une solution plus loin.

Retour sur le focus

Afin de bien vous montrer ce qu'est le focus, voici un exemple qui vous montrera ce que ça donne sur un input classique et un lien :

Comme vous pouvez le constater, lorsque vous cliquez sur l'input, celui-ci « possède » le focus : il exécute donc l'événement et affiche alors un texte différent vous demandant d'appuyer sur votre touche de tabulation. L'appui sur la touche de tabulation permet de faire passer le focus à l'élément suivant. En clair, en appuyant sur cette touche vous faites perdre le focus à l'input, ce qui déclenche l'événement blur (qui désigne la perte du focus) et fait passer le focus sur le lien qui affiche alors son message grâce à son événement focus.

Bloquer l'action par défaut de certains événements

Passons maintenant à un petit problème : quand vous souhaitez appliquer un événement click sur un lien, que se passe-t-il ? Regardez donc par vous-mêmes :

Si vous avez essayé le code, vous avez sûrement remarqué que la fonction alert() a bien fonctionné, mais qu'après vous avez été redirigé vers le Site du Zéro, or on souhaite bloquer cette redirection. Pour cela, il suffit juste d'ajouter le code return false; dans notre événement click :

Ici, le return false; sert juste à bloquer l'action par défaut de l'événement qui le déclenche.

À noter que l'utilisation de return true; permet de faire fonctionner l'événement comme si de rien n'était. En clair, comme si on n'utilisait pas de return false;
Cela peut avoir son utilité si vous utilisez, par exemple, la fonction confirm() dans votre événement.

L'utilisation de « javascript: » dans les liens : une technique prohibée

Dans certains cas, vous allez devoir créer des liens juste pour leur attribuer un événement click et non pas pour leur fournir un lien vers lequel rediriger. Dans ce genre de cas, il est courant de voir ce type de code :

Nous vous déconseillons fortement de faire cela ! Si vous le faites quand même, ne venez pas dire que vous avez appris le Javascript grâce à ce cours, ce serait la honte pour nous ! 

Plus sérieusement, il s'agit d'une vieille méthode qui permet d'insérer du Javascript directement dans l'attribut href de votre lien juste en ajoutant javascript: au début de l'attribut. Cette technique est maintenant obsolète et nous serions déçus de vous voir l'utiliser, nous vous en déconseillons donc très fortement l'utilisation et vous proposons même une méthode alternative :

Concrètement, qu'est-ce qui change ? On a tout d'abord remplacé l'immonde javascript: par un dièse (#) puis on a mis notre code Javascript dans l'événement approprié (click). Par ailleurs, on libère l'attribut href, ce qui nous permet, si besoin, de laisser un lien pour ceux qui n'activent pas le Javascript ou bien encore pour ceux qui aiment bien ouvrir leurs liens dans de nouveaux onglets.

OK, j'ai compris, mais pourquoi un return false; ?

Tout simplement parce que le dièse redirige tout en haut de la page Web, ce qui n'est pas ce que l'on souhaite. On bloque donc cette redirection avec notre petit bout de code.

Vous savez maintenant que l'utilisation de javascript: dans les liens est prohibée et c'est déjà une bonne chose. Cependant, gardez bien à l'esprit que l'utilisation d'un lien uniquement pour le déclenchement d'un événement click n'est pas une bonne chose, préférez plutôt l'utilisation d'une balise <button> à laquelle vous aurez retiré le style CSS. La balise <a>, elle, est conçue pour rediriger vers une page Web et non pas pour servir exclusivement de déclencheur !

Créé avec HelpNDoc Personal Edition: Créer des documents d'aide facilement