Exemple de modèle d'événement JavaScript Compétences Analysis_Javascript

Les exemples de cet article décrivent l'utilisation du modèle d'événement JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. Modèle d'événement

Événements bouillonnants : les événements sont propagés à partir des nœuds feuilles le long des nœuds ancêtres jusqu'au nœud racine
Capturer les événements : de l'élément supérieur de l'arborescence DOM jusqu'à l'élément le plus précis, par opposition aux événements bouillonnants
Modèle d'événement standard DOM : La norme DOM prend en charge à la fois les événements bouillonnants et les événements de capture. On peut dire qu'il s'agit d'une combinaison des deux. D'abord, le type de capture, puis la livraison bouillonnante

.

2. Objet événement

Dans le navigateur IE, l'objet événement est un attribut de fenêtre. Dans le standard DOM, l'événement doit être passé comme seul paramètre à la fonction de traitement des événements

Obtenir un objet événement compatible :

function(event){ 
  //event 是作为DOM标准的参数传入处理函数 
 event = event ?event : window.event; 
} 

Dans IE, l'objet de l'événement est contenu dans le srcElement de l'événement, tandis que dans le standard DOM, l'objet est contenu dans l'attribut target
Récupère l'élément pointé par l'objet événement compatible :

var target =event.srcElement ? event.srcElement : event.target ;

Le principe est de s'assurer que l'objet événementiel a été correctement obtenu

3. Écouteur d'événement

Sous IE, les auditeurs enregistrés sont exécutés dans l'ordre inverse, c'est-à-dire que ceux enregistrés plus tard sont exécutés en premier

element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器

Le premier paramètre est le nom de l'événement et le deuxième paramètre est la fonction du gestionnaire de rappel

Sous norme DOM :

element.addEventListener('click',observer,useCapture) 
element.removeEventListener('click',observer,useCapture)

Le premier paramètre est le nom de l'événement sans le préfixe "on", le deuxième paramètre est la fonction de traitement de rappel et le troisième paramètre indique si la fonction de rappel est appelée dans la phase de capture ou dans la phase de bouillonnement. en phase de capture

4. Livraison de l'événement

Annuler de manière compatible la diffusion des événements du navigateur

function someHandler(event){ 
  event = event || window.event; 
  if(event.stopPropagation) //DOM标准 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE标准 
} 

Traitement par défaut après l'annulation de la diffusion de l'événement

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM标准 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE标准 
}

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.