Maison >interface Web >js tutoriel >Plusieurs concepts de compétences events_javascript liées au javascript

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

WBOYoriginal: 2016-05-16 15:58:081067parcourir

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)});
   }
 }

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);

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des compétences js de même origine Policy_JavascriptArticle suivant：Explication détaillée des compétences js de même origine Policy_Javascript

Articles Liés

Voir plus