L'ordre des événements
Supposons qu'un autre élément soit imbriqué dans un élément et que les deux ont un gestionnaire d'événements OnClick. Si l'utilisateur clique sur l'élément 2, les événements de clic des éléments 1 et 2 sont déclenchés. Mais quel événement est déclenché en premier? Quelle fonction de gestionnaire d'événements sera exécutée en premier? En d'autres termes, quel est l'ordre dans lequel les événements se produisent? Comme le montre la figure ci-dessous, lorsque la zone de l'élément de portée est cliquée, les trois événements de clic seront déclenchés, mais quelle est la commande?
<div onclick = "func1"> <p onclick = "func2"> <span onclick = "" func3> </span> </p> </div>
Deux modèles
Netscape et Microsoft ont deux méthodes complètement différentes pour gérer cet événement:
• Netscape préconise que les événements se produiront de la couche la plus externe à l'élément le plus spécifique, et cette séquence d'événements est appelée type de capture
• Microsoft tient les événements de l'élément le plus intérieur, puis se propage vers le haut. Cette séquence d'événements est appelée type de bulle
L'ordre de ces deux événements est complètement opposé. Le navigateur Explorer ne prend en charge que les événements à bulles, Mozilla, Opera7 et Konqueror. L'opéra plus ancien et ICAB ne supporte ni
W3C
Tout événement qui se produit dans le modèle d'événement W3C entre d'abord dans l'étape de capture jusqu'à ce que l'élément cible soit atteint, puis entre dans le stade de la bulle.
Pour le développement Web normal, vous pouvez choisir de lier la fonction du gestionnaire d'événements dans l'étape de capture ou l'étape de la bulle. Ceci est réalisé via la méthode addEventListener (). Si le paramètre UseCapture de cette fonction est vrai, la fonction est liée à l'étape de capture, et vice versa, la fonction est liée au stade de la bulle.
element.addeventListener (événement, fonction, usecapture)
Arrêter les bulles
Pendant le développement normal, si vous souhaitez empêcher la propagation des événements, vous pouvez le faire via une méthode.
Dans le modèle de Microsoft, vous devez définir la propriété Cancelbubble de l'événement sur True
window.event.cancelbubble = true
Dans le modèle W3C, vous devez appeler la méthode stoppropagation () de l'événement
e.stoppropagation ()
Appeler ces méthodes empêchera toutes les bulles de se propager vers l'extérieur. Solution de croisement:
fonction dosomething (e) {if (! e) {var e = window.event; e.cancelbubble = true; } if (e.stoppropagation) {e.stoppropagation (); }}La compréhension approfondie de l'article ci-dessus des bulles d'événements et de la capture d'événements est tout le contenu que j'ai partagé avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.