Dans la programmation traditionnelle, les applications sont exécutées séquentiellement du début à la fin de produire leurs résultats. Cependant, à l’heure actuelle, le modèle prédominant est celui de la programmation basée sur des événements. Les scripts et les programmes attendent sans tâche avant qu’un événement ne se produise. Une fois fabriqués, ils dirigent une tâche associée à l’apparition de cet événement et lorsqu’il se termine, le script ou le programme renvoie à l’état de veille.
JavaScript permet aux scripts avec les deux méthodes de programmation: séquentielle et basée sur des événements. Les événements JavaScript permettent l’interaction entre les applications et les utilisateurs JavaScript. Chaque fois qu’un bouton est enfoncé, un événement se produit. Chaque fois qu’une touche est enfoncée, un événement est également produit. Cependant, pour un événement à survenir, il n’est pas obligatoire que l’utilisateur intervienne, car par exemple, chaque fois qu’une page est chargée, un événement est également produit.
Le dimanche niveau 1 n’inclut pas les spécifications liées à Événements javascript. Le dimanche Niveau 2 inclut certains aspects liés aux événements et DOM Niveau 3 inclut la spécification complète des événements JavaScript. Malheureusement, la spécification DOM Niveau 3 a été publiée en 2004, plus de dix ans après que les premiers navigateurs comprenaient des événements.
Pour cette raison, bon nombre des propriétés et méthodes actuelles liées aux événements sont incompatibles avec celles du soleil . En fait, des navigateurs tels que Internet Explorer Treatent les événements suivant leur propre modèle incompatible avec la norme.
Le modèle d’événement simple a été introduit dans la version 4 de la norme HTML et est considérée comme faisant partie du niveau DOM le plus élémentaire. Bien que ses fonctionnalités soient limitées, c’est le seul modèle compatible avec tous les navigateurs et, par conséquent, le seul qui vous permet de créer des applications qui fonctionnent de la même manière dans tous les navigateurs.
15.1 Types d’événements
Chaque élément XHTML a sa propre liste d’événements possibles pouvant être attribués. Le même type d’événement (par exemple, cliquer sur le bouton gauche de la souris) peut être défini pour plusieurs éléments XHTML et le même élément XHTML peut avoir différents associés d’événements.
Le nom des événements est construit via le préfixe on, suivi du nom anglais de l’action associée à l’événement. Ainsi, l’événement pour cliquer sur un élément avec la souris est appelé onclick et l’événement associé à la déplacement de la souris s’appelle onmousemove.
Le tableau suivant résume les événements les plus importants définis par JavaScript:
onblur un élément perd le
<button>, <input>, , <select>,
,
onchange <input>, <select>, <textarea> onclick ondblclick onfocus <button>, <input>, <label>, <select>, <textarea>, onkeydown onkeypress onkeyup onload onmousedown >
onmousemove onmouseout onmouseover onmouseup onreset <form> onresize onselect <input>, <textarea> onsubmit onunload Les événements les plus utilisés dans les applications Web traditionnelles sont onload pour attendre la page complète de la page, Événements onclick, onmouseover, onmouseout pour contrôler la souris et onsubmit pour contrôler l’envoi de la Formulaires.
Quelques événements dans la table précédente (onclick, onkeydown,
, onreset, onsubmit) vous permet d’éviter une « action par défaut » de cet événement. Plus tard, ce comportement est indiqué en détail, qui peut être très utile dans certaines techniques de programmation.
actions typiques qu’un utilisateur effectue sur une page Web peut conduire à une succession d’événements. En appuyant par exemple sur un type Les événements sont déclenchés onmousedown, onclick, onmouseup et onsubmit consécutivement.
15.1.1 Managers d’événement
Un événement JavaScript en soi manque d’utilité. Pour que les événements soient utiles, les fonctions ou le code JavaScript doivent être associés à chaque événement. De cette manière, lorsqu’un événement survient, le code indiqué est exécuté, l’application peut donc réagir à tout événement qui se produit pendant l’exécution.
Les fonctions ou le code JavaScript défini pour chaque événement appelé événement Gestionnaire (gestionnaires d’événements en anglais) et comme JavaScript est une langue très flexible, il existe plusieurs manières différentes d’indiquer les gestionnaires:
- gestionnaires en tant qu’attributs des éléments XHTML.
- Les gestionnaires comme fonctions javascript externes.
- « sémantiques » gestionnaires.
15.1.1.1 gestionnaires tels que les attributs XHTML
Il s’agit de la méthode la plus simple et moins professionnelle d’indiquer le code JavaScript qui doit être exécuté lorsqu’un événement se produit. Dans ce cas, le code est inclus dans un attribut de l’élément XHTML lui-même. Dans l’exemple suivant, vous souhaitez afficher un message lorsque l’utilisateur ponctue avec la souris sur un bouton:
<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />
Méthode, les attributs XHTML sont définis avec le même nom que les événements que vous souhaitez gérer. L’exemple précédent ne veut que contrôler l’événement piquant avec la souris, dont le nom est onclick. Ainsi, l’élément XHTML pour lequel vous souhaitez définir cet événement doit inclure un attribut appelé onclick
Le contenu de l’attribut est une chaîne de texte qu’il contient Toutes les instructions JavaScript sont exécutées lorsque l’événement se produit. Dans ce cas, le code JavaScript est très simple (console.log('Gracias por pinchar');), car il s’agit uniquement d’afficher un message.
Dans cet autre exemple, lorsque l’utilisateur clique Sur l’élément <div> montre un message et lorsque l’utilisateur passe la souris sur l’élément, un autre message est affiché:
<div onclick="console.log('Has pinchado con el ratón');" onmouseover="console.log('Acabas de pasar el ratón por encima');"> Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima</div>
/ div>
Cet autre exemple inclut l’une des instructions les plus utilisées dans les applications JavaScript les plus anciennes:
<body onload="console.log('La página se ha cargado completamente');"> ...</body>
Le message précédent s’affiche une fois la page entièrement chargée, c’est-à-dire après que son code HTML a été téléchargé, vos images et tout autre objet inclus sur la page.
L’événement onload est l’un des plus utilisés depuis, comme on le voit dans le chapitre DOM, les fonctions qui permettent l’accès et manipulent les nœuds de l’arbre DOM ne sont disponibles que lorsque la page a été chargée complexe. Tiniquement.
15.1.1.2 Gestionnaires d’événements et variable Ce
JavaScript définit une variable spéciale appelée this créé automatiquement et c’est-à-dire emploie dans certaines techniques de programmation avancées. Lors d’événements, vous pouvez utiliser la variable this pour faire référence à l’élément XHTML qui a provoqué l’événement. Cette variable est très utile pour des exemples tels que ceux suivants:
lorsque l’utilisateur passe la souris sur le <div>, la couleur de bord est affichée en noir. Lorsque la souris quitte l’ID
, le bord est à nouveau montré avec la couleur gris clair d’origine.
<div style="width:150px; height:60px; border:thin solid silver"> Sección de contenidos...</div>
si la variable n’est pas utilisée this, le code nécessaire pour modifier la couleur des bords, ce serait comme suit:
<div style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('contenidos').style.borderColor='black';" onmouseout="document.getElementById('contenidos').style.borderColor='silver';"> Sección de contenidos...</div>
Le code précédent est trop long et trop sujet à faire des erreurs. Dans le code d’un événement, JavaScript crée automatiquement la variable this, qui fait référence à l’élément XHTML qui a provoqué l’événement. Ainsi, l’exemple précédent peut être réécrit comme suit:
Le code précédent est beaucoup plus compact, plus facile à lire et à écrire et continuer à fonctionner correctement même si la valeur de l’attribut ID du <div> 15.1.1.3 Les gestionnaires d’événements comme des fonctions externes
La définition des gestionnaires d’événements dans les attributs XHTML est une méthode simple mais non établie pour traiter les événements JavaScript. L’inconvénient principal est qu’il est compliqué de l’excès dès que quelques instructions sont ajoutées, il n’est donc recommandé que pour les cas les plus simples.
Lorsque le code de la fonction de manutention est plus complexe, tel que le Validation d’une forme, il est conseillé de regrouper tout le code JavaScript dans une fonction externe appelée à partir du code XHTML lorsque l’événement se produit.
de cette manière, l’exemple suivant:
<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />
peut être transformé en:
<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />
dans des fonctions externes Il n’est pas possible d’utiliser la variable this de la même manière que dans les gestionnaires insérés dans les attributs XHTML. Par conséquent, il est nécessaire de passer la variable this comme paramètre sur la fonction de manipulation:
function resalta(elemento) { switch(elemento.style.borderColor) { case 'silver': case 'silver silver silver silver': case '#c0c0c0': elemento.style.borderColor = 'black'; break; case 'black': case 'black black black black': case '#000000': elemento.style.borderColor = 'silver'; break; }}
<div style="padding: .2em; width: 150px; height: 60px; border: thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)"> Sección de contenidos...</div>
Dans l’exemple précédent, la fonction externe est transmise le paramètre this, qui Dans la fonction s’appelle elemento. En passant this comme paramètre, il est possible d’accéder directement à la fonction externe aux propriétés de l’élément qui a provoqué l’événement.
D’autre part, l’exemple précédent est compliqué par la manière dont les différents navigateurs stockent la valeur de la propriété borderColor. Tandis que Firefox stocke (dans le cas où les quatre bords correspondent à la couleur) la valeur simple black, Internet Explorer le stocke comme black black black black et stocke son hexadécimal Représentation #000000.
15.1.1.4 Mancheurs d’événements sémantiques
Utilisez les attributs XHTML ou les fonctions externes pour ajouter des gérants d’événements ont un désagrément grave : « Intégrez » le code XHTML de la page.
Comme on le sait, lors de la création de pages Web, il est recommandé de séparer le contenu (XHTML) de la présentation (CSS). Autant que possible, il est également recommandé de séparer le contenu (XHTML) de la programmation (JavaScript). Mélanger JavaScript et XHTML complique excessivement le code source de la page, il rend son entretien difficile et réduit la sémantique du document final produit.
Heureusement, il existe une méthode alternative pour définir les gestionnaires d’événements de JavaScript. Cette technique consiste à attribuer des fonctions externes à l’aide des propriétés DOM des éléments XHTML. Ainsi, l’exemple suivant:
<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />Se puede transformar en:
<input type="button" value="Pinchame y verás" />
Le code XHTML résultant est très « propre », car il ne se mélange pas avec le code JavaScript. La technique des gestionnaires sémantiques comprend:
- Attribuer un identifiant unique à l’élément XHTML à l’aide de l’attribut ID.
- Créez une fonction JavaScript en charge de la manipulation de l’événement.
- Attribuez la fonction à un événement spécifique de l’élément XHTML à l’aide de DOM.
Un autre avantage supplémentaire de cette technique est que les fonctions externes peuvent utiliser la variable this a référé à l’élément que l’original de l’événement.
attribuer à la fonction de traitement à l’aide de DOM est un processus qui nécessite une explication détaillée. Tout d’abord, vous obtenez la référence de l’élément auquel le gestionnaire va être attribué:
Suivant, est attribué la fonction externe à l’événement souhaité au moyen d’une propriété d’élément portant le même nom de l’événement:
Enfin, l’externe fonction. Comme cela est déjà mentionné dans les chapitres précédents, surtout (et la cause la plus courante des erreurs) est d’indiquer que le nom de la fonction, c’est-à-dire qui s’affiche avec les parenthèses en attribuant la fonction:
document.getElementById("pinchable").onclick = muestraMensaje;
Si les parenthèses sont ajoutées à la fin, la fonction est en cours d’appel et l’attribution de la valeur renvoyée par la fonction à l’événement onclick élément.
Le seul inconvénient de cette méthode est que les gestionnaires sont attribués à l’aide des fonctions DOM, qui ne peuvent être utilisées que lorsque la page a été complètement chargée. De cette manière, de sorte que la cession des gestionnaires n’est pas erronée, il est nécessaire de s’assurer que la page a déjà été chargée.
L’un des moyens les plus simples de s’assurer qu’un certain code va Soyez exécuté ensuite que la page est entièrement téléchargée consiste à utiliser l’événement onload:
L’art antérieur utilise une fonction anonyme pour attribuer des instructions à l’événement onload de la page (dans ce cas, il a été défini par l’objet ). De cette manière, de veiller à ce qu’un certain code soit exécuté une fois la page chargée, il est nécessaire de l’inclure à l’intérieur de la construction suivante:
window.onload = function() { ...}
15.2 Le flux d’événements
Outre les événements de base observés, les navigateurs incluent un mécanisme associé appelé flux d’événements ou « flux d’événements ». Le flux d’événements permet à plusieurs éléments différents de réagir au même événement.
si un élément <div> avec un bouton est défini à l’intérieur lorsque l’utilisateur clique sur l’intérieur. Le bouton, le navigateur vous permet d’attribuer une fonction de réponse à bouton, une autre fonction de réponse au <div> qui contient une autre fonction de réponse à la page complète. De cette manière, un seul événement (la pulsation d’un bouton) provoque la réponse de trois éléments sur la page (y compris la page elle-même).
La commande sur laquelle les événements attribués à chaque élément sont exécutés à partir de la La page est ce qui constitue le flux d’événements. De plus, il existe de nombreuses différences dans le flux d’événements de chaque navigateur.
15.2.1 Boubelle d’événement
dans ce modèle d’écoulement d’événement, l’ordre suivi est de l’élément. plus spécifique à l’élément moins spécifique.
Dans les exemples suivants, la page HTML suivante est utilisée:
<html onclick="procesaEvento()"> <head><title>Ejemplo de flujo de eventos</title></head> <body onclick="procesaEvento()"> <div onclick="procesaEvento()">Pincha aqui</div> </body></html>
Lorsque vous appuyez sur le texte « Cliquez ici », c’est à l’intérieur de <div>, les événements suivants sont exécutés sur l’ordre indiquant le schéma suivant:
Figure 15.1 « Schéma de fonctionnement » Boubelle d’événement «
Le premier événement pris en compte est celui généré par <div> contenant le message. Ensuite, le navigateur exécute les ascendants d’élément jusqu’à atteindre le niveau supérieur, qui est l’élément document
Ce modèle d’écoulement d’événements est celui qui inclut l’Internet Explorer le navigateur. Les navigateurs de la famille Mozilla (par exemple, Firefox) supportent également ce modèle, mais légèrement modifié. L’exemple précédent dans un navigateur familial Mozilla présente le flux d’événements suivant:
Figure 15.2 « Boubillage d’événement « Schéma de fonctionnement dans les navigateurs Mozilla
Bien que l’objet window ne fait pas partie du DOM, le flux d’événements mis en œuvre par Mozilla Travel the Element Ascendants jusqu’à ce que le même objet window, en ajoutant un événement plus au modèle Internet Explorer.
15.2.2 Capture d’événement
dans cet autre Modèle, le flux d’événements est défini de l’élément moins spécifique à l’élément le plus spécifique. En d’autres termes, le mécanisme défini est précisément le contraire de « bouillonnement d’événement ». Ce modèle a été utilisé par le navigateur de Netscape Navigator 4.0 manquant.
15.2.3 Evénements DOM
Le flux d’événements défini dans la spécification Sun prend en charge à la fois des bouillons et de la capture, mais l’événement La capture « fonctionne en premier. Les deux flux d’événements parcourent tous les objets Dom de l’objet document à l’élément le plus spécifique et inversement. De plus, la plupart des navigateurs mettent en œuvre les normes, le flux continue jusqu’à l’objet window
Le flux d’événements DOM de l’exemple précédent est présenté ci-dessous:
Figure 15.3 Schéma de flux d’événements du modèle DOM
Le plus spécifique L’élément du flux d’événements n’est pas le <div> qui déclenche l’exécution des événements, mais le nœud type TextNode qu’il contient le <div>. Le fait de combiner les deux flux d’événements, provoque l’exécution du nœud le plus spécifique à exécuter deux événements consécutivement.
15.3 gestionnaires et écouteurs
dans les sections précédentes, le concept a été introduit de « gestionnaire d’événements « Ou gestionnaire d’événements, qui sont les fonctions qui répondent aux événements qui se produisent. De plus, trois façons de définir des gestionnaires d’événements ont été visualisés pour le modèle d’événement de base:
- code JavaScript dans un attribut de l’élément HTML
- Définition de l’événement dans le HTML Article lui-même mais le gestionnaire est une fonction externe
- manutentionnaires sémantiques assignés via Sun Sun sans la modification du code HTML de la page
Tous ces modèles fonctionnent correctement Tous les navigateurs disponibles aujourd’hui. Les différences entre les navigateurs se présentent lorsque plusieurs personnes manipulatrices d’événements sont définies pour le même événement d’un élément. Le moyen d’assigner et de «désassigner» plusieurs poignées multiples dépend entièrement du navigateur utilisé.
15.3.1 DOM Gains d’événement
La spécification SDI définit deux autres méthodes similaires à celles disponibles pour Internet Explorateur et soi-disant et removeEventListener() pour associer et dissocier les gestionnaires d’événements.
La principale différence entre ces méthodes Et ce qui précède est que, dans ce cas, trois paramètres sont requis: le nom de « l’écoute d’événement », une référence à la fonction responsable du traitement de l’événement et du type de flux d’événements auquel il est appliqué.
Le premier argument n’est pas le nom complet de l’événement car il se produit dans le modèle Internet Explorer, mais vous devez supprimer le préfixe on. En d’autres termes, si sur Internet Explorer, le nom onclick sera utilisé maintenant click
Le troisième paramètre est , le gestionnaire est utilisé dans la phase de capture. Si le troisième paramètre est false, le gestionnaire est associé à la phase de barbillage.
Ensuite, les exemples ci-dessus sont affichés à l’aide des méthodes définies par DOM:
en associant plusieurs Fonctions à un seul événement:
Si une fonction est associée à un débit d’événement donné, cette fonction ne peut être désassassée que dans le même type de flux d’événements. Si l’exemple suivant est considéré:
function muestraMensaje() { console.log("Has pulsado el ratón");} var elDiv = document.getElementById("div_principal");elDiv.addEventListener("click", muestraMensaje, false); // Más adelante se decide desasociar la función al eventoelDiv.removeEventListener("click", muestraMensaje, true);
La dernière instruction tente de dissocier la fonction muestraMensaje Dans le flux d’événements de capture, tout en l’associant, le flux d’événements de barbillage a été indiqué. Bien que l’exécution de l’application ne s’arrête pas et que aucune erreur ne se produise, la dernière instruction n’a aucun effet.
15.4 L’événement
Lorsqu’un événement se produit, il ne suffit pas de Affectation d’une fonction responsable du traitement de cet événement. Normalement, la fonction qui traite les informations nécessaires aux besoins de l’événement concernant l’événement produit: la clé qui a été enfoncée, la position de la souris, l’élément que l’événement a produit, etc.
l’objet event est le mécanisme défini par les navigateurs pour fournir toutes ces informations. C’est un objet qui est créé automatiquement lorsqu’un événement se produit et qui est détruit automatiquement lorsque toutes les fonctions attribuées à l’événement ont été exécutées.
Le dimanche spécifie que l’objet est le seul paramètre qui doit accéder aux fonctions responsables des événements de traitement. Par conséquent, dans les navigateurs qui suivent les normes, l’objet est accessible event à travers la matrice des arguments de la fonction:
Il est également possible d’indiquer l’argument de nom explicitement:
Le fonctionnement des navigateurs qui suivent que les normes peuvent sembler « magiques », car dans la déclaration de la fonction, il est indiqué qu’il a un paramètre, mais dans la demande, aucun paramètre n’est transmis à cette fonction. En réalité, les navigateurs qui suivent des normes créent automatiquement ce paramètre et la transmettent toujours à la fonction chargée de la manipulation de l’événement.
15.4.1 Propriétés et méthodes
Même si le mécanisme défini par navigateurs pour l’objet event est similaire, il existe de nombreuses différences dès que les propriétés et les méthodes de l’objet.
15.4.1.1 Propriétés définies par DOM
Le tableau suivant recueille les propriétés définies de l’objet event dans les navigateurs qui suivent les normes:
| Propriété / Méthode | Retours | Description |
|---|---|---|
altKey |
Boolean | Retours Si la touche et false dans un autre cas |
| Boolean | indique si l’événement appartient au flux d’événements de bulles | |
button |
numéro entier | le bouton de la souris appuyé.Valeurs possibles: 0 – Aucune touche enfoncée 1 – Bouton a été appuyé sur izquierdo 2 – Se ha pulsado el botón derecho 3 – Se pulsan a la vez el botón izquierdo y el derecho 4 – Se ha pulsado el botón central 5 – Se pulsan a la vez el botón izquierdo y el central 6 – Se pulsan a la vez el botón derecho y el central 7` – sont pressés en même temps les 3 |
cancelable |
boolean | indique si l’événement peut annuler |
cancelBubble |
boolean | indique si le flux d’événements de type bullbing |
a arrêté charCode |
Numéro entier | Le code Unicode de caractère correspondant à la clé pulsée |
clientX |
nombre total | coordonnée x de la position de la souris par rapport à la zone visible de la |
clientY |
nombre entier | coordonnée et la position de la souris re Croquis de la zone visible de |
ctrlKey |
Boolean | Retours Si la touche et false dans un autre cas |
currentTarget |
élément | l’élément qui est l’objectif de l’événement |
| numéro complet | le nombre de fois que les boutons de la souris ont été enfoncés / Td> | |
eventPhase |
numéro entier | la phase à laquelle appartient l’événement: 0 – Capture de phase 1 – Dans l’élément cible 2 – Boubillage de phase |
isChar |
boolean | indique si la touche de pression correspond à un caractère |
keyCode |
nombre entier | indique le code numérique de la Touche pressée |
metaKey |
renvoie si la touche et false dans un autre cas |
|
pageX |
Numéro entier | Coordonnée x de la position de la souris par rapport à la page |
| numéro complet | Coordonnées et la position de la souris par rapport à la page | |
preventDefault() |
fonction est utilisé pour annuler l’action prédéfinie de l’événement | |
relatedTarget |
élément | l’élément qui est l’objectif secondaire de l’événement ( liés aux événements de la souris) |
| nombre total | x coordonnez le position de la souris par rapport à l’écran complet | |
screenY |
Numéro entier | Coordonnées et la position de la souris concernant l’écran complet |
shiftKey |
Boolean | Retours Si la touche et false dans un autre cas |
stopPropagation() |
fonction | est utilisé pour arrêter le flux d’événements de type Bullbling |
target |
élément | l’élément qui provient de l’événement |
timeStamp |
numéro | la date et l’heure dans lesquelles l’événement |
| texte string | le nom de l’événement |
Contrairement à ce qui se passe avec Internet Explorer, la plupart des propriétés d’objet de soleil en train de lire. Spécifiquement, seules les propriétés suivantes sont lues et écrivent: altKey, button
et
.
La touche est une clé spéciale sur certains claviers d’ordinateur très anciens. Actuellement, dans les ordinateurs PC, il est assimilé à la touche Alt ou la clé Windows, tandis que sur les ordinateurs de type Mac, il est assimilé à la touche Command.
15.4.2 Similités et différences entre les navigateurs
15.4.2.1 Similités
Dans les deux cas, la propriété Type est utilisée pour obtenir le type d’événement c’est à propos de:
function procesaEvento(elEvento) { if(elEvento.type == "click") { console.log("Has pulsado el raton"); } else if(elEvento.type == "mouseover") { console.log("Has movido el raton"); }} elDiv.onclick = procesaEvento;elDiv.onmouseover = procesaEvento;
tandis que le gestionnaire d’événements inclut le préfixe on Votre nom, le type d’événement renvoyé par la propriété type distribue de ce préfixe.C’est pourquoi dans l’exemple précédent compare sa valeur avec click et mouseover et non avec
et onmouseover.
Une autre similarité est l’utilisation de la propriété keyCode pour obtenir le code correspondant au caractère. de la clé qui a été pressée. La clé pulsée ne représente pas toujours un caractère alphanumérique. Lorsque vous appuyez sur la touche ENTER Par exemple, le code . La barre d’espace correspond au code 32 et la touche DELETE a un code égal à
. . Un moyen immédiat de vérifier si certaines touches spéciales ont été appuyées, consiste à utiliser les propriétés shiftKey, altKey et ctrlKey.
Pour obtenir la position de la souris par rapport à la partie visible de la fenêtre, les propriétés et
. De la même manière, d’obtenir la position du pointeur de la souris par rapport à l’écran complet, les propriétés sont utilisées screenX et screenY.
15.4.2.2 Différences
L’une des principales différences est la manière dont l’élément qui provient de l’événement est obtenu. Si un élément <div> est attribué à un événement onclick, en appuyant sur la souris l’intérieur de la <div> un événement dont l’objectif est originaire est l’élément .
> Une autre différence importante est celle concernant l’obtention du caractère correspondant à la clé pulsée. Chaque clé pulsée a associé deux codes différents: le premier est le code de la clé qui a été appuyé et que l’autre code est celui qui fait référence au caractère pulsé.
Le premier code est un code de clé interne. Pour JavaScript. Le deuxième code coïncide avec le code de caractère ASCII. De cette façon, la lettre a a un code interne égal à 65 et un code ASCII de 97 D’autre part, la lettre A a également un code interne de 65 et un code ASCII de 95.
dans Internet Explorer, le contenu de la propriété keyCode dépend de chaque événement. Dans « Clé Appuyez sur » Events (onkeyup et onkeydown) sa valeur est égale au code interne. Dans « Ecrire avec des touches » Events (onkeypress) sa valeur est égale au code ASCII du caractère pressé.
au contraire, dans les navigateurs qui suivent Les normes de propriété keyCode est égale au code interne dans « Clé Appuyez sur » Events (onkeyup et onkeydown) et il est égal à 0 sur les événements « écriture avec les touches » (onkeypress).
En pratique, cela suppose que dans les événements onkeyup Vous pouvez utiliser la même propriété dans tous les navigateurs:
function manejador(elEvento) { var evento = elEvento || window.event; console.log(" El código de la tecla pulsada es " + evento.keyCode);}document.onkeyup = manejador;document.onkeydown = manejador;
Dans ce cas, si la page est chargée dans n’importe quel navigateur et enfoncée par exemple la clé A, le message suivant:
Figure 15.4 Message affiché dans le navigateur Firefox
La grande différence se produit E Lorsque vous essayez d’obtenir le caractère appuyé, dans ce cas, la lettre a. Pour obtenir la lettre, vous devez d’abord obtenir votre code ASCII. Comme discuté, sur Internet explore la valeur de la propriété keyCode dans l’événement onkeypress est égal au caractère ASCII:
function manejador() { var evento = window.event;
Toutefois, dans les navigateurs qui ne sont pas Internet Explorer, Le code précédent est égal à 0 pour n’importe quelle touche pulsée. Dans ces navigateurs suivant les normes, la propriété doit être utilisée charCode, qui renvoie le code de la clé pulsée, mais uniquement pour l’événement onkeypress::
function manejador(elEvento) { var evento = elEvento;
une fois obtenu le Code Dans chaque navigateur, la fonction doit être utilisée String.fromCharCode() pour obtenir le caractère dont le code ASCII est passé sous forme de paramètre. Par conséquent, la solution complète pour obtenir la clé pulsée dans n’importe quel navigateur est la suivante:
L’une des propriétés les plus intéressantes est la possibilité d’empêcher le comportement normal d’un événement à compléter.En d’autres termes, avec JavaScript, il est possible de ne montrer aucun caractère lorsqu’une touche est enfoncée, n’envoyez pas un formulaire après avoir appuyé sur le bouton d’expédition, ne téléchargez aucune page en appuyant sur un lien, etc. La méthode avancée d’empêchement d’un événement d’exécuter son action associée dépend de chaque navigateur:
// Navegadores que siguen los estandareselEvento.preventDefault();
dans le modèle d’événement de base aussi est possible d’empêcher le comportement par défaut de certains événements. Si, par exemple dans un élément <textarea> Le gestionnaire d’événements suivant est indiqué:
> Dans l’ID
Précédent ne sera pas possible d’écrire un caractère, car le gestionnaire d’événements renvoie false et c’est la valeur nécessaire pour prévenir les extrémités de l’exécution de l’événement et donc d’empêcher la lettre d’être écrite.
Donc, il est possible de définir des poignées d’événements qui renvoient ou
en fonction de certains paramètres. Par exemple, un certain nombre de caractères pouvant être écrits peuvent être conçus dans un <textarea>:
function limita(maximoCaracteres) { var elemento = document.getElementById("texto"); if(elemento.value.length >= maximoCaracteres ) { return false; } else { return true; }}
<textarea onkeypress="return limita(100);"></textarea>
Le fonctionnement de l’exemple précédent est détaillé ci-dessous:
- l’événement
onkeypressPour contrôler si la clé est écrite ou non. - La valeur renvoyée est renvoyée par la fonction externe
limita()à laquelle la valeur est passé la valeur100. - si la valeur renvoyée par
limita()C’est
, l’événement se produit normalement et le caractère est écrit dans <textarea>. Si la valeur renvoyée par limita() est false, l’événement ne se produit pas et le caractère n’est donc pas écrit dans le <textarea>.
limita() retourne ou false après avoir vérifié si le nombre de caractères de <textarea> est supérieur ou inférieur au nombre maximal de caractères qui s’est produit sous forme de paramètre. l’objet event vous permet également d’arrêter complètement l’exécution du flux normal des événements:
// Navegadores que siguen los estandareselEvento.stopPropagation();
En empêchant le flux d’événements en attente, les événements qui restent de ce moment sont trop sollicités jusqu’à ce que tous les éléments en attente soient exécutés jusqu’à l’élément window.
15.5 types d’événements
La liste complète des événements pouvant être générée dans un navigateur peut être divisée en quatre grands g roupies Spécification DOM Définit les groupes suivants:
- Evénements de la souris: Ils sont originaires de leur origine lorsque l’utilisateur utilise la souris pour effectuer certaines actions.
- Evénements de clavier: Ils sont originaires de l’interruption de l’utilisateur. Toute clé de son clavier.
- Evénements HTML: Ils sont originaires de leur origine lorsque des modifications se produisent dans la fenêtre du navigateur ou lorsque certaines interactions entre le client et le serveur se produisent.
- DOM Events: Ils sont originaires de Un changement se produit dans la structure DOM de la page. Ils sont également appelés « événements de mutation ».
15.5.1 Événements de souris
Les événements de la souris sont, avec beaucoup de différence, le plus d’employés des applications Web. Les événements inclus dans cette classification sont les suivants:
click ENTER dblclick
est enfoncé deux fois sur
mousedown mouseout mouseover mouseup mousemove »
Tous les éléments des pages prennent en charge les événements du tableau précédent.
15.5.1.1 Propriétés
L’objet événement contient les propriétés suivantes pour les événements de la souris:
- coordonnées de la souris (toutes les différentes coordonnées relatives à différents éléments)
- La propriété
type - la propriété
srcElement(Internet Explorer) outarget(DOM) - Propriétés
shiftKey,ctrlKey,altKeyetmetaKey(DOM uniquement) - La propriété
button(seulement dans les événementsmousedown,mousemove,mouseout,et mouseup)
événements mouseover et mouseout ont des propriétés supplémentaires. Internet Explorer définit la propriété fromElement, qui fait référence à l’élément à partir duquel le pointeur de la souris a été déplacé et toElement c’est l’élément auquel Le pointeur de la souris a déménagé. De cette façon, dans l’événement mouseover, la propriété toElement est identique à srcElement et Dans l’événement mouseout, la propriété fromElement est identique à srcElement.
.
Dans les navigateurs prenant en charge la norme DOM, il n’y a qu’une seule propriété appelée relatedTarget. Dans l’événement mouseout, relatedTarget pointe vers l’élément auquel la souris a déplacé. Dans l’événement mouseover, relatedTarget pointe vers l’élément à partir duquel le pointeur de la souris a été déplacé.
quand un Le bouton de la souris est enfoncé, la séquence des événements qui se produit est la suivante: mousedown, mouseup, Par conséquent, la séquence des événements nécessaires pour atteindre le double-clic devient aussi complexe que celles suivantes: mousedown, mouseup, click, mousedown, mouseup, click,
15.5.2 Événements de clavier
Les événements inclus dans cette classification sont les suivants:
| Event | Description |
|---|---|
keydown |
se produit lorsque vous appuyez sur une touche sur le clavier. Il se produit également de manière continue si le |
15.5.2.1 propriétés
L’objet événement contient les propriétés suivantes pour les événements du clavier:
- la propriété
keyCode - La propriété
charCode(Sun uniquement) - La propriété
srcElement(Internet Explorer) outarget(DOM) - Propriétés
shiftKey,ctrlKey,altKeyetmetaKey(Sun uniquement)
Lorsqu’une touche est enfoncée sur un caractère alphanumérique, il se produit la séquence suivante de Événements: , keypress, keyup. Lorsqu’un autre type de clé est enfoncé, la séquence suivante se produit: , keyup. Si la clé est détenue, dans le premier cas, les événements sont répétés de manière continue /div> et
et dans le second cas, répétez l’événement continuellement.
Evénements HTML
Les événements HTML définis sont collectés dans le tableau suivant:
| Event | Description |
|---|---|
load |
se produit dans l’objet de la fenêtre lorsque la page est complètement chargé. Dans l’élément `lorsque l’objet |
| se produit dans l’objet de la fenêtre lorsque la page disparaît complètement (lors de la fermeture de la fenêtre du navigateur par exemple). Dans l’élément lorsque l’objet disparaît. | |
abort |
se produit dans un élément <object> lorsque l’utilisateur arrête le téléchargement de l’élément avant qu’il ne soit terminé |
se produit dans l’objet de la fenêtre lorsqu’une erreur JavaScript se produit. Dans l’élément <img> lorsque l’image n’a pas pu être chargée complètement et dans l’élément lorsque l’élément ne charge pas correctement |
|
select |
se produit lorsque plusieurs caractères d’une zone de texte sont sélectionnés (<input> et <textarea>) |
change |
se produit Lorsqu’une boîte de texte (<input> et <textarea>) perdez la mise au point et son contenu varie. Il se produit également lorsque la valeur d’un élément <select> |
se produit lorsque vous appuyez sur une touche de type de soumission ( <input type="submit">) |
reset |
se produit lorsque vous appuyez sur Sur un bouton de type de réinitialisation (<input type="reset">) |
| se produit dans l’objet de la fenêtre lorsque la fenêtre de navigateur est redimensionnée | |
scroll |
se produit dans n’importe quel article qui a une barre de défilement, lorsque l’utilisateur l’utilise. L’élément contient la barre de défilement de la page complète |
focus |
se produit dans n’importe quel élément (y compris l’objet de la fenêtre) lorsque l’élément obtient le | Se produit dans n’importe quel élément (y compris l’objet de la fenêtre) lorsque l’élément perd la mise au point |
L’un des événements les plus utilisés est l’événement load, car toutes les manipulations effectuées par DOM exigent que la page soit chargée complète et donc, l’arbre DOM a été complètement Construit.
L’élément Définit les propriétés scrollLeft et scrollTop qui peut être utilisé avec l’événement scroll.
15.5.4 Événements Sun
Bien que des événements de ce type font partie du La spécification officielle du Soleil n’a pas encore été mise en œuvre dans tous les navigateurs.Le tableau suivant collecte les événements les plus importants de ce type:
| Description | |
|---|---|
| se produit lorsque des nœuds sont ajoutés ou supprimés dans la sous-arbre d’un document ou | |
DOMNodeInserted |
se produit lorsqu’un nœud est ajouté en tant qu’enfant à partir d’un autre nœud |
DOMNodeRemoved |
se produit lorsqu’un nœud est supprimé qui est enfant d’un autre nœud |
DOMNodeRemovedFromDocument |
se produit lorsqu’un nœud est supprimé |
| se produit lorsqu’un nœud est ajouté au document |