Explication détaillée du modèle d'événement

Cette fois, je vais vous apporter une explication détaillée du modèle d'événement. Quelles sont les précautions pour utiliser l'explication détaillée de l'événement. Ce qui suit est un cas pratique, voyons. jetez un oeil.

IEÉvénementModèle (pas de capture) (<=ie8)

1. attachEvent(événement, function)
   detachEvent(event, function)
   Le premier paramètre est on+'event';

2. TargetObjectevent.srcElement;

3. cela pointera vers window;

4. event.cancelBubble = true // Arrêter de bouillonner
   event.returnValue = false // Bloquer les événements par défaut

Modèle d'événement DOM standard (capture, cible, bulle) (>ie8)

1. addEventListener(event, function, useCapture)
   removeEventListener(event, function, useCapture)
   useCapture est vrai, exécuté dans la phase de capture, déclenché de l'extérieur vers l'intérieur
   useCapture est faux, pendant la bulle de risque ; phase d'exécution (par défaut), déclenchée de l'intérieur vers l'extérieur ;

2. event.target et event.currentTarget
   target sont dans la phase cible de l'événement. flow ( Pointe vers l'objet qui déclenche la surveillance des événements);
   currentTarget (pointe vers l'objet qui ajoute la surveillance des événements) dans les étapes de capture, de cible et de bouillonnement du flux d'événements
   Uniquement lorsque le flux d'événements est dans le flux d'événements ; étape cible, les deux points sont les mêmes ;
   Dans les étapes de capture et de bouillonnement, target pointe vers l'objet cliqué et currentTarget pointe vers l'objet de l'activité événementielle en cours (généralement le parent).

3. cela pointe vers l'objet d'écoute d'événement

4. event.stopPropagation() // Arrêtez de bouillonner
   event.preventDefault() / / Empêcher l'événement par défaut

5. event.stopImmediatePropagation(), empêcher les fonctions de traitement d'événement restantes de s'exécuter et empêcher l'événement de remonter dans l'arborescence DOM. n'accepte aucun paramètre ;

Événement personnalisé

var event = new Event('自定义事件');// Listen for the event.elem.addEventListener('自定义事件', function (e) { ... }, false);// Dispatch the event.elem.dispatchEvent(event);
CustomEvent 接口可以为 event 对象添加更多的数据；detail属性可用于传递自定义数据：var event = new CustomEvent('自定义事件', { 'detail': elem.dataset.time });
下面的代码允许你在事件监听器中访问更多的数据：function eventHandler(e) {
  log('The time is: ' + e.detail);
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux articles liés au site Web chinois php Autres !

Lecture recommandée :

Comment utiliser la boucle d'événements

Comment implémenter le bouillonnement et la capture d'événements JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!