Plusieurs concepts de compétences events_javascript liées au javascript-js tutoriel-php.cn

Plusieurs concepts de compétences events_javascript liées au javascript

WBOY

Libérer： 2016-05-16 15:58:08

original

1076 Les gens l'ont consulté

Le programme JavaScript côté client adopte un modèle de programmation asynchrone basé sur les événements.

Plusieurs concepts d'événements liés :

　Type d'événement : Une chaîne utilisée pour décrire le type d'événement qui s'est produit

　Cible de l'événement : L'objet où l'événement se produit

　Gestionnaire d'événements : Une fonction qui gère ou répond aux événements

　Objet événement : Un objet lié à un événement spécifique et contenant des informations détaillées sur l'événement

　Propagation d'événements : Le processus par lequel le navigateur détermine quel objet déclenche son gestionnaire d'événements

Enregistrer le gestionnaire d'événements :

1. Définissez les attributs de l'objet JavaScript ;

2. Définir les attributs de la balise html

　3. addEventListener ou attachEvent (ce dernier est pour IE)

 function addEvent(target,type,handler){
   if(target.addEventListener){
     target.addEventListener(type,handler,false);
   }else{
     target.attachEvent("on"+type,function(event){return handler.call(target,event)});
   }
 }

Copier après la connexion

Trois étapes de propagation d'un événement :

1. Se produit avant la fonction de traitement cible, appelée phase de « capture »

;

2. Appel des propres événements de traitement de l'objet

3. La scène bouillonnante des événements

En javascript, vous pouvez spécifier un événement pour un élément. Il existe trois façons de spécifier : .

1. En html, utilisez l'attribut onclick

2. En javascript, utilisez l'attribut onclick
3. En javascipt, utilisez la méthode addEvenListener()

Comparaison de trois méthodes

(1) Dans les deuxième et troisième méthodes, vous pouvez transmettre un objet événement à la fonction et lire ses attributs correspondants, mais la méthode ne le peut pas.

(2) Les deuxième et troisième options sont préférées. La première ne permet pas de séparer le contenu de l'événement et le contenu associé de l'objet événement ne peut pas être utilisé.

Quelques détails grammaticaux

(1) Dans la première méthode, onclick est indépendant de la casse, mais dans la seconde méthode, les minuscules doivent être utilisées. Parce que HMTL n'est pas sensible à la casse, alors que JS est sensible à la casse.

(2) Dans les deuxième et troisième méthodes, il n'y a pas de guillemets doubles lors de la spécification du nom de la fonction, tandis que la première méthode, en tant qu'attribut HTML, nécessite des guillemets doubles.
(3) La première méthode nécessite des parenthèses, mais pas les deuxième et troisième méthodes.

 onclick="clickHandler()"
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", clickHandler2);

Copier après la connexion

Code complet :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Even Deom</title> 
 
</head> 
<body> 
 <button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button> 
 <button id="jsOnClick">jsOnClick</button> 
 <button id="addEventListener">addEventListener</button> 
  
 <script defer> 
 function clickHandler() { 
 alert("onclick attribute in html"); 
 } 
 function clickHandler2(e) { 
 alert(e.target.innerHTML); 
 } 
 document.getElementById("jsOnClick").onclick = clickHandler2; 
 document.getElementById("addEventListener").addEventListener("click", 
  clickHandler2); 
</script> 
</body> 
</html>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.