Explication détaillée de la propagation des événements JS, de l'annulation du comportement par défaut des événements et de la prévention de la propagation des événements

Cet article présente principalement JS pour propager des événements, annuler le comportement par défaut des événements et empêcher la propagation des événements. Le processus détaillé est expliqué à travers la séquence d'appel de valeur de retour du programme Traitement des événements. Si vous êtes intéressé par JS, vous pouvez vous référer à cet article

1. La valeur de retour du gestionnaire d'événements

Normalement, la valeur de retour false est de dire le navigateur ne doit pas exécuter L'action par défaut associée à cet événement. Par exemple, le gestionnaire d'événements onclick du bouton de soumission du formulaire peut empêcher le navigateur de soumettre le formulaire en renvoyant false, et le gestionnaire d'événements onclick de la balise a peut empêcher le passage à la page href en renvoyant false. De même, le gestionnaire d'événements onkeypress sur le champ de saisie peut filtrer la saisie au clavier en renvoyant false si l'utilisateur saisit des caractères inappropriés.
La valeur de retour d'un gestionnaire d'événements n'a de sens que pour les gestionnaires enregistrés via des attributs.

2. Séquence d'appel

Les éléments de document ou d'autres objets peuvent enregistrer plusieurs gestionnaires d'événements pour des types d'événements spécifiés. Lorsque l'événement approprié se produit, le navigateur doit appeler tous les gestionnaires d'événements selon les règles suivantes :

Les gestionnaires enregistrés en définissant les propriétés de l'objet ou les attributs HTML ont toujours la priorité.
Les gestionnaires enregistrés à l'aide de addEventListener() sont appelés dans l'ordre dans lequel ils ont été enregistrés.
Les gestionnaires enregistrés à l'aide de attachEvent() peuvent être appelés dans n'importe quel ordre, le code ne doit donc pas dépendre de l'ordre des appels

3. Propagation des événements

Après avoir appelé le gestionnaire d'événements enregistré sur l'élément cible, la plupart des événements "bulleront" jusqu'à la racine de l'arborescence DOM. Appelle le gestionnaire d'événements sur l'élément parent de la cible, puis appelle le gestionnaire d'événements enregistré sur l'élément grand-parent de la cible. Cela va jusqu'à l'objet Document et enfin à l'objet Window.

La plupart des événements qui se produisent sur les éléments du document bouillonnent, à l'exception notable des événements de focus, de flou et de défilement. L'événement de chargement de l'élément document fera des bulles, mais il cessera de bouillonner sur l'objet Document et ne se propagera pas à l'objet Window. L'événement de chargement de l'objet Window ne sera déclenché que lorsque l'intégralité du document sera chargé.

4. Annulez le comportement de l'événement par défaut et empêchez la propagation de l'événement

Dans les navigateurs prenant en charge addEventListener(), vous pouvez appeler l'objet événement The La méthode PreventDefault() annule l’action par défaut de l’événement. Dans IE avant IE9, le même effet peut être obtenu en définissant la propriété returnValue de l'objet événement sur false. Le morceau de code suivant combine trois techniques pour annuler des événements :

function cancelHandler(event){
 var event=event||window.event;//兼容IE
 //取消事件相关的默认行为
 if(event.preventDefault) //标准技术
 event.preventDefault();
 if(event.returnValue) //兼容IE9之前的IE
 event.returnValue=false;
 return false; //用于处理使用对象属性注册的处理程序
}

L'opération par défaut liée à l'annulation d'un événement n'est qu'une opération d'annulation d'événement, et nous pouvons également annuler la propagation d'un événement. Dans les navigateurs prenant en charge addEventListener(), vous pouvez appeler la méthode stopPropagation() de l'objet événement pour empêcher l'événement de continuer à se propager. Si d'autres gestionnaires sont définis sur le même objet, les gestionnaires restants seront toujours appelés, mais les gestionnaires d'événements sur d'autres objets ne seront pas appelés après l'appel de stopPropagation().

IE avant IE9 ne prend pas en charge la méthode stopPropagation(), mais définit la propriété CancelBubble de l'objet événement sur true pour empêcher toute propagation ultérieure de l'événement.

D'accord, ce qui précède est tout le contenu compilé par l'éditeur, j'espère qu'il sera utile à tout le monde~

Recommandations associées :

JavaScript pour implémenter l'alarme invites Explication détaillée des effets sonores

Explication détaillée des exemples de file d'attente prioritaire JavaScript et de file d'attente circulaire

Partage d'exemples d'implémentation JavaScript de trois niveaux effets spéciaux en cascade

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!