DOM événements:Appeler un événement
Un article de WikiTuto.
Sommaire |
Introduction
Des effets dynamiques sont ajoutables à une page Web grâce à des gestionnaires d'événements. Cela permet l'exécution de codes spécifiques en réponse à une action donnée de l'utilisateur, ou bien du système d'exploitation.
La plupart des événements sont reliés à l'interface utilisateur du navigateur, tels que déplacements de souris, actions sur des boutons ou des touches du clavier, réponses à des formulaires... Ces événements sont en général reliés à un élément particulier dans la page. D'autres sont des événements activés en réponse à une action spécifique du navigateur (chargement d'un document, voire d'une image seule).
Quelques objets ont des actions définies par défaut en réponse à certains événements. Par exemple, un clic sur un élément a active le lien hypertexte, et force le navigateur à charger l'URL indiquée dans l'attribut href.
En fait, tous les événements suivent le même modèle. Le DOM fournit des méthodes pour capturer les événements, et lancer une action quelconque en réponse. Il définit également un objet event, dont les propriétés permettent d'accéder à des informations spécifiques à l'événement (par exemple, quelle touche du clavier a été activée...).
Comment appeler un événement?
Par un attribut HTML
Rappels
Des événements sont intrinsèquement liés à beaucoup d'éléments HTML. On peut accéder à ces événements par un simple appel à un attribut décrivant la nature de l'événement (c'est ce que nous avons fait tout au long des cours précédents). L'exemple suivant montre comment utiliser un attribut pour définir un événement.
<span style="background-color: yellow" onmouseover="this.style.backgroundColor='black" onmouseout="this.style.backgroundColor='yellow"> Un élément avec une simple gestion d'événement</span>
En fait, tout se passe comme si, lors de l'appel au code Javascript dans chaque attribut, le navigateur créait dynamiquement une fonction contenant le code inscrit dans l'attribut. L'exemple suivant montre comment lancer une boîte d'alerte affichant le contenu de l'attribut onclick de l'élément sur lequel on a cliqué.
<span style="background-color:yellow;" onclick="alert(this.onclick)"> Exemple de contenu avec un événement onclick.</span>
Le code précis de la fonction dépend du navigateur utilisé, mais le principe reste le même.
Attention, certains événements ne sont pas applicables à n'importe quel élément. Par exemple, les événements focus et blur (qui désignent respectivement l'action de sélectionner un élément par la souris et/ou l'emploi de la touche Tabulation, et l'action de le désélectionner) ne sont applicables qu'aux champs de formulaire et aux liens).
Compatibilité inter-navigateurs
- Netscape et Mozilla créent une fonction portant le nom de l'événement, et utilisant un argument unique, event, qui est l'objet événenement passé au gestionnaire d'événements.
function onclick(event) {
alert(this.onclick) ;
}
- Internet Explorer utilise une fonction anonymous. Il ne suit pas le standard, et donc aucun argument n'est défini (nous y reviendrons plus loin).
function anonymous() {
alert(this.onclick) ;
}
- Opera utilise une fonction anonymous avec un argument event.
function anonymous(event) {
alert(this.onclick) ;
}
Les attributs possibles
N'importe quel attribut n'est pas utilisable avec n'importe quel élément. *onclick (clic simple), ondblclick (double clic), onmouseover (la souris entre au-dessus de la boîte de l'élément), onmouseout (la souris quitte la boîte de l'élément), onmousedown (un bouton de la souris est enfoncé), onmouseup (un bouton de la souris est relaché), onmousemove (la souris se déplace au-dessus de la boîte de l'élément), onkeypress (une touche est enfoncée puis relachée), onkeydown (une touche est enfoncée) et onkeyup (une touche est relachée) sont disponibles pour la très grande majorité des éléments courants.
*onload et onunload sont utilisables avec les éléments body et frameset, et sont activés dès que le corps du document a été chargé, ou bien, dans le second cas, quand tous les cadres enfants du frameset ont été chargés.
- onsubmit et onreset s'appliquent uniquement à un élément form, et sont activés à la soumission ou à la remise à zéro d'un formulaire.
- onselect est utilisable pour les éléments input et textarea. Il est activé quand l'utilisateur sélectionne une zone de texte dans le champ.
- onchange est utilisable pour les éléments input, select et textarea, et est activé quand l'utilisateur modifie un de ces champs de saisie.
- Enfin, onfocus et onblur sont utilisables avec les éléments a, area (zone d'image dans une image cliquable), label (étiquette attachée à un élément de formulaire), input, select, textarea et button. Ils sont activés respectivement quand l'utilisateur sélectionne l'élément correspondant soit par la souris, soit par la tabulation.
Par l'utilisation d'une propriété d'un élément
Un événement est aussi accessible et modifiable grâce à une propriété de l'élement sélectionné, comme bon nombre d'autres attributs. L'exemple suivant montre comment utiliser une propriété de l'objet-élément pour définir un événement.
<span id="sample1" style="background-color:yellow;"> Exemple avec un événement souris.</span>
et le code Javascript associé :
document.getElementById('sample1').onmouseover = highlight ;
document.getElementById('sample1').onmouseout = normal ;
function highlight(event) {
this.style.backgroundColor="black" ;
this.style.color="white" ;
}
function normal(event) {
this.style.backgroundColor="yellow" ;
this.style.color="" ;
}
Il est à remarquer qu'on affecte à la propriété onmouseover la valeur highlight, autrement dit, le nom de la fonction sans les parenthèses.Cela représente l'objet de type function attendu par la propriété : une référence à la fonction qui doit être appelée, et non un appel à la fonction.
Si highlight() avait été utilisé en lieu et place, le navigateur aurait appelé la fonction et renvoyé la valeur qu'elle retourne à la propriété.
Exercice 1. Utilisation des propriétés des éléments
Par des 'event listeners'
Principe
Les objets du DOM peuvent aussi être enregistrés en tant qu'"event listeners", autrement dit, on peut faire en sorte qu'ils restent à l'écoute d'événements particuliers, voire même de plusieurs. Cela permet aussi d'affecter plusieurs gestionnaires à un événement, en fonction du contexte et/ou du passé de l'élément. Enfin, cela permet de spécifier un comportement différent lors du "cascadage" des événements d'un élément à son parent -ou à un de ses enfants. Nous y reviendrons.
La syntaxe de base est la suivante :
noeud.addEventListener(eventType, function, useCapture) ; noeud.removeEventListener(eventType, function, useCapture) ;
où eventType est un événement prédéfini, comme mouseover ou click (le même nom que celui de l'attribut correspondant, mais sans le "on"), function est le nom de la fonction gérant l'événement, et useCapture un booléen qui spécifie dans quelle phase du flot d'événement la fonction sera appelée.
Exemple
Par exemple, pour continuer avec le même cas que précédemment, on aurait pu écrire
var el=document.getElementById("sample1") ;
el.addEventListener(mouseover, highlight, false) ;
el.addEventListener(mouseout, normal, false) ;
Des gestionnaires supplémentaires auraient pu tout aussi bien être affectés à cet élément :
el.addEventListener(mouseover, highlight2, true) ; el.addEventListener(mouseover, highlight3, false) ;
De même, on peut les supprimer...
el.removeEventListener(mouseover, highlight2, true) ; el.removeEventListener(mouseout, highlight3, false) ;
Il faut spécifier le même useCapture que lors de l'ajout du gestionnaire. En effet...
el.addEventListener(mouseover, highlight, true) ; el.addEventListener(mouseover, highlight, false) ;
... crée deux event listeners uniques, appelant certes la même fonction, mais actifs lors de phases différentes.
L'avantage principal de cette méthode est qu'elle permet d'affecter un gestionnaire d'événement à n'importe quel nœud, y compris les nœuds de type texte. Ces derniers ne possédant en effet pas d'attribut, il n'est pas possible de leur affecter des événements par les deux premières méthodes que nous avons vues.
Le cas Internet Explorer
Internet Explorer jusqu'à la version 6 incluse, et Opera jusqu'à la version 5 incluse ne supportent pas les event listeners. Internet Explorer fournit les méthodes attachEvent et detachEvent qui permettent d'affecter ou de détacher plusieurs gestionnaires pour un même événement. Par exemple :
var el = document.getElementById("sample1") ;
el.attachEvent("onmouseover", highlight) ;
el.attachEvent("onmouseover", highlight2) ;
el.attachEvent("onmouseover", highlight3) ;
el.attachEvent("onmouseout", normal) ;
...
el.detachEvent("onmouseover", highlight2) ;
el.detachEvent("onmouseover", highlight3) ;
Plusieurs remarques s'imposent :
- Ces méthodes ne permettent pas de spécifier la phase de l'événement (voir plus loin) ;
- Elles ne peuvent pas être utilisées avec des nœuds de type texte ;
- Elles ne font pas partie des standards.
Exercice 1. Utilisation simple d'un gestionnaire d'événement
Voir aussi
- Comment appeler un événement?
- flot d'événements
- L'objet Event
