Réponses détaillées aux événements en JS (tutoriel graphique)

Cet article présente principalement la propagation des événements JS, annulant le comportement par défaut des événements et empêchant la propagation des événements. Le processus détaillé est expliqué à travers la séquence d'appel de valeur de retour du gestionnaire d'événements. Les amis dans le besoin peuvent se référer à

<.>

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

Normalement, la valeur de retour false indique au navigateur de ne pas effectuer l'opération par défaut lié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 sont toujours prioritaires.

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 un événement :

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 est uniquement l'une des annulations d'événements. Alternativement, nous pouvons également annuler la propagation de l'é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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

jsExplication détaillée pour déterminer si le client peut accéder à Internet

Fonctionnement dynamiqueQuelles sont les méthodes pour les fichiers js/css

Méthodes de configuration pour l'utilisation de sass dans vueprojects_vue.js

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!