Encapsulation des événements JS natifs et enlèvement

Ajoutez ou supprimez les événements dans IE Browser avec attachEvent et Detachevent. Dans d'autres navigateurs standard, ADDEVENTListener et DeVoveEventListener sont utilisés. Le suivant résume l'addition et la suppression des événements. Regardez simplement le code!

 / *** @Description Event Binding, compatible avec les navigateurs * @param cible * Objet de déclenchement de l'événement * @param type * événement * @param func * Fonction du gestionnaire d'événements * / fonction bind (Target, Type, func) {if (target.addeventListener) {// non ie et ie9target.addeventLentner (type, func, false); ie6 to ie8target.attachevent ("on" + type, func);} else {cible ["on" + type] = func; // ie5}} / *** @description l'événement supprimant, compatible avec chaque navigateur * @param cible * objet de déclenchement de l'événement * @param type * événement * @param func * function de gestionnaire d'événements * / fonction unbind (Target, Type, func) {if (target.removeeventListener) {target.removeEventSener (Type, Func, false);} gens

Autres suppléments sur la signification du troisième paramètre d'AdveventListener

Le troisième paramètre d'AdveventListener

La fonction utilisée pour ajouter un événement de déclenchement dans W3C DOM est appelée ADDEVENTListener. Cependant, je n'ai jamais su pour quoi le troisième paramètre de cette fonction doit être utilisé. Je l'ai toujours réglé avec désinvolture et je n'ai trouvé aucune différence. J'ai finalement vu l'explication lorsque j'ai lu PPK sur JavaScript il y a deux jours. Quant aux fichiers DOM standard qui ont été trouvés il y a longtemps, je n'ai jamais cherché des informations sur ce paramètre.

Ce paramètre est appelé usecapture, qui est une valeur booléenne, qui est vraie ou fausse. Si True est envoyé, le navigateur utilisera la méthode de capture. Si False l'est, il bouillonne, ce qui n'aura un impact que dans des situations spécifiques. Il est généralement recommandé d'être faux. La situation où il y aura un impact est que l'élément cible a un élément ancêtre et la même fonction de correspondance d'événements. Je pense qu'il sera plus clair de voir l'image.

L'exemple a deux couches de blocs div

Comme le montre cette image, mon exemple a deux couches d'éléments Div et définir un événement de clic. De manière générale, si je clique sur l'élément bleu intérieur déclenchera non seulement l'événement de clic de l'élément bleu, mais déclenchera également l'événement de clic de l'élément rouge en même temps. Le paramètre UseCapture est de contrôler l'ordre des deux événements de clic pour le moment. S'il est faux, le bouillonnement sera utilisé. Il s'agit d'un processus de l'intérieur, donc l'événement de clic de l'élément bleu sera d'abord exécuté, puis l'événement de clic de l'élément rouge. Si c'est vrai, alors c'est la capture. Au contraire, le bouillonnement sera de l'extérieur vers l'intérieur. L'événement de clic de l'élément rouge sera exécuté avant avant que l'événement de clic de l'élément bleu ne soit exécuté. Les attaches sont deux exemples, la capture et le bubbleng. Les deux fichiers ne sont différents que dans ce paramètre, vous pouvez donc constater que la séquence d'événements se produit est différente.

Et si l'utilisation utilisée par les éléments de différentes couches est différente? Cela signifie qu'à partir de l'élément le plus extérieur, il recherchera d'abord les événements définis comme capture sur l'élément cible, et après avoir atteint l'élément cible pour exécuter l'événement de l'élément cible, puis recherchez les événements définis comme bulle.