Bases de Javascript (2) Événements_Connaissances de base

Objet événement : (L'objet événement est une propriété de l'objet fenêtre. Lorsqu'un événement se produit, un objet événement est généré en même temps. Lorsque l'événement se termine, l'objet événement disparaît)

Dans IE : window.event ;//Récupérer l'objet

Dans DOM : argument[0];//Récupérer l'objet

Méthodes d'attributs couramment utilisées des objets Event dans IE :

1.clientX : Lorsque l'événement se produit, la coordonnée X du pointeur de la souris dans la zone client (hors barres d'outils, barres de défilement, etc.) ;

2.clientY : Lorsque l'événement se produit, la coordonnée Y du pointeur de la souris dans la zone client (hors barres d'outils, barres de défilement, etc.) ;

3.keyCode : Pour les événements keyCode, indiquez le caractère Unicode de la touche enfoncée. Pour les événements keydown/keyup, indiquez que le clavier enfoncé est un indicateur numérique (récupérez la valeur de la touche).

4.offsetX : Coordonnée X du pointeur de la souris par rapport à l'objet qui a déclenché l'événement

5.offsetY : Coordonnée Y du pointeur de la souris par rapport à l'objet qui a déclenché l'événement

6.srcElement : L'élément qui a provoqué l'événement

Méthodes d'attributs couramment utilisées des objets événement dans le DOM :

1.clientX;

2.clientY;

3.pageX; Coordonnée X du pointeur de la souris par rapport à la page

4.pageY; Coordonnée Y du pointeur de la souris par rapport à la page

5.StopPropagation : L'appel de cette méthode peut empêcher la propagation ultérieure (bulle) de l'événement

 ;

6.target : élément/objet d'événement déclenché

7.type : nom de l'événement

Les similitudes et les différences entre les deux objets événementiels

 :

Mêmes points :

1. Obtenez le type d'événement

2. Obtenez le code du clavier (événement keydown/keyup) ;

3. Détecter Shift, Alt, Ctrl

4. Obtenez les coordonnées de la zone client;

5. Obtenez les coordonnées de l'écran ;

Différences :

1. Obtenez la cible

//IE : var oTarget=oEvent.srcElement;

//DOM : var oTarget=oEvent.target;

2. Obtenez le code de caractère

//IE : var iCharCode=oEvent.keyCode;

//DOM : var iCharCode=oEvent.charCode;

3. Bloquer le comportement par défaut des événements

//IE : oEvent.returnValue=false;

//DOM : oEvent.preventDefault;

4. Terminer le bouillonnement :

//IE:oEvent.cancelBubble=true;

//DOM:oEvent.stopPropagation

Type d'événement :

1. Événements de souris :

onmouseover : lorsque la souris entre ; onmouseout : lorsque la souris sort ;

onmousedown : lorsque la souris est enfoncée

onmouseup : lorsque la souris est levée ;

onclick : lorsque vous cliquez sur le bouton gauche de la souris

ondblclick : lors d'un double-clic sur le bouton gauche de la souris

2. Événements de clavier :

onkeydown : se produit lorsque l'utilisateur appuie sur une touche du clavier onkeyup : se produit lorsque l'utilisateur relâche une touche enfoncée

keypress : Lorsque l'utilisateur continue d'appuyer sur la touche

3. Événements HTML :

onload : lors du chargement de la page ; onunload : lors du déchargement de la page ;

abort : lorsque l'utilisateur termine le processus de chargement, s'il n'a pas été complètement chargé, un événement d'abandon se produit

erreur : événement généré lorsqu'une erreur JavaScript se produit ;

select : Dans une zone de saisie ou de texte, lorsque l'utilisateur sélectionne un caractère, l'événement select est déclenché

change : dans une zone d'entrée ou de texte, lorsqu'elle perd le focus, l'événement de changement est déclenché dans la sélection

submit : lorsque le formulaire est soumis, l'événement de soumission est déclenché

 ;

réinitialiser : Réinitialiser

resize : événement déclenché lorsque la taille de la fenêtre ou du cadre est redimensionnée ;

scroll : événement déclenché lorsque l'utilisateur fait défiler ou dispose d'une barre de défilement

concentration : lorsque la concentration est perdue

flou : lors de la mise au point

Modèle d'événement Javascript

1.Modèle d'événement Javascript : 1. Type de bulle : Lorsque l'utilisateur clique sur le bouton : input-body-html-document-window (bulles de bas en haut) Navigation IE Le l'appareil utilise simplement le bouillonnement 2. Type de capture : Lorsque l'utilisateur clique sur le bouton : window-document-html-body-input (de haut en bas)

Après la standardisation ECMA, d'autres navigateurs prennent en charge les deux types, la capture ayant lieu en premier.

2. Trois manières d'écrire les événements traditionnels :

1.

2.======<script>function name1(){alert('helloword!');}</script> /Fonction célèbre

3. //Fonction anonyme

Copier le code

Le code est le suivant : <script></span> Var bouton1=document.getElementById("input1");</div> bouton1.onclick=fonction(){<div class="codebody" id="code47982"> alert('bonjour mot !')<br> ><br> </script>



3. Comment rédiger des événements modernes :

Copier le code

Le code est le suivant :

//Ajouter un événement dans IE

<script><br> var fnclick(){<br> alert("J'ai été cliqué")<br> ><br> var Oinput=document.getElementById("input1");<br> Oinput.attachEvent("onclick",fnclick);<br> -----------------------------------------------<br> Oinput.detachEvent("onclick",fnclick);//Supprimer les événements dans IE<br> </script>

Copier le code Le code est le suivant :

//Ajouter un événement dans le DOM

<script><br> var fnclick(){<br> alert("J'ai été cliqué")<br> ><br> var Oinput=document.getElementById("input1");<br> Oinput.addEventListener("onclick",fnclick,true);<br> -----------------------------------------------<br> Oinput.removeEventListener("onclick",fnclick);//Supprimer les événements dans DOM<br> </script>

Copier le code Le code est le suivant :

//Compatible avec IE et DOM ajoutant des événements

<script><br> var fnclick1=function(){alert("J'ai été cliqué")}<br> var fnclick2=function(){alert("J'ai été cliqué")}<br> var Oinput=document.getElementById("input1");<br> si(document.attachEvent){<br> Oinput.attachEvent("onclick",fnclick1)<br> Oinput.attachEvent("onclick",fnclick2)<br> ><br> autre(document.addEventListener){<br> Oinput.addEventListener("click",fnclick1,true)<br> Oinput.addEventListener("click",fnclick2,true)<br> ><br> </script>