Encapsulation de l'ajout et de la suppression de compétences natives js events_javascript

Pour ajouter ou supprimer des événements dans le navigateur IE, utilisez attachEvent et detachEvent. Dans d'autres navigateurs standards, addEventListener et RemoveEventListener sont utilisés. Ce qui suit résume l’ajout et la suppression d’événements. Regardons simplement le code !

/**
* @description 事件绑定，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function bind(target, type, func) {
if (target.addEventListener) {// 非ie 和ie9
target.addEventListener(type, func, false);
} else if (target.attachEvent) { // ie6到ie8
target.attachEvent("on" + type, func);
} else {
target["on" + type] = func; // ie5
}
}
/**
* @description 事件移除，兼容各浏览器
* @param target
* 事件触发对象
* @param type
* 事件
* @param func
* 事件处理函数
*/
function unbind(target, type, func) {
if (target.removeEventListener) {
target.removeEventListener(type, func, false);
} else if (target.detachEvent) {
target.detachEvent("on" + type, func);
} else {
target["on" + type] = null;
}
}

Autres ajouts sur la signification du troisième paramètre de addEventListener

Le troisième paramètre de addEventListener

La fonction utilisée pour ajouter des événements déclencheurs dans le DOM du W3C s'appelle AddEventListener, mais je ne sais jamais à quoi sert le troisième paramètre de cette fonction, je l'ai toujours défini avec désinvolture et je ne l'ai jamais trouvé. comme la différence est différente, j'ai enfin vu l'explication en lisant ppk sur javascript il y a deux jours Quant au document standard DOM qui existait il y a longtemps, je n'ai en fait jamais cherché d'informations sur ce paramètre sur. tous.

Ce paramètre s'appelle useCapture, qui est une valeur booléenne, qui est vraie ou fausse. Si vrai est envoyé, le navigateur utilisera la méthode Capture. Si faux, ce sera Bubbling. Dans certaines circonstances, il est généralement recommandé d'être faux. La situation qui aura un impact est que l'élément cible (élément cible) a un élément ancêtre (élément ancêtre), et il a également la même fonction d'événement. plus clair en regardant la photo.

Exemple de bloc div à deux couches

Comme le montre cette image, mon exemple comporte deux couches d'éléments div, et les deux sont définies avec des événements de clic. De manière générale, si je clique sur l'élément bleu interne, non seulement l'élément bleu sera déclenché. déclenchera également l'événement click de l'élément rouge en même temps, et le paramètre useCapture contrôle l'ordre des deux événements click à ce moment. Si c'est faux, alors le bouillonnement sera utilisé. Il s'agit d'un processus inversé, donc l'événement click de l'élément bleu sera exécuté en premier, puis l'événement click de l'élément rouge, s'il est vrai, il sera capturé. . Contrairement au bullage, il sera exécuté par Outside-in, l'événement click de l'élément rouge sera exécuté en premier, puis l'événement click de l'élément bleu sera exécuté. Ci-joint deux exemples, capture et bullage. La seule différence entre les deux fichiers est ce paramètre. On peut constater que l'ordre des événements est différent.

Et si des éléments de différents calques utilisaient des useCaptures différentes ? Autrement dit, il recherchera d'abord l'événement à capturer depuis l'élément le plus externe vers l'élément cible. Après avoir atteint l'élément cible et exécuté l'événement de l'élément cible, il recherchera ensuite l'événement défini pour bouillonner vers l'extérieur le long de l'original. chemin.