Comment supprimer les gestionnaires d'événements anonymes en JavaScript

Lors de l'utilisation de addEventListener() et attachEvent() pour lier un gestionnaire d'événements à un élément DOM, si une fonction anonyme est transmise, alors les removeEventListener() et detachEvent() correspondants sont used Ce gestionnaire anonyme ne peut pas être dissocié. Nous devrions donc transmettre une expression de fonction lors de son utilisation.

Donc, si vous souhaitez utiliser des fonctions anonymes pour la liaison et la dissociation, comment résoudre ce problème ?

Idée

Aucune de ces deux fonctions n'accepte de fonctions anonymes pour la dissociation, vous ne pouvez donc pas compter sur elles pour gérer les événements, vous définissez donc un objet personnalisé pour gérer les événements.
L'essence d'un gestionnaire d'événements est que lorsqu'un événement se produit sur un objet, la fonction qui écoute l'événement est exécutée.

Un élément DOM peut avoir des gestionnaires liés à plusieurs types d'événements. Par exemple, la couleur change lorsque vous cliquez et s'agrandit lorsque vous passez la souris.

Un type d'événement peut être lié à plusieurs gestionnaires d'événements. Par exemple, lorsque vous survolez la souris, elle change de couleur et s'agrandit.

Ainsi, cet objet événement doit avoir une propriété pour stocker tous les gestionnaires d'événements liés à cet élément DOM, et il doit également y avoir deux méthodes, une pour ajouter et une pour supprimer.

{
    handlers:{
    type1:[handler1,handler2],
    type2:[handler1,handler2],    ...//其他事件类型和对应的事件处理函数
    },
    on:function(){},
    off:function(){}
}

Lorsqu'un événement se produit, toutes les fonctions du tableau du type d'événement correspondant dans cet objet sont appelées.

Donc, l'événement de liaison consiste à ajouter la fonction au tableau correspondant, et l'événement de déliaison consiste à supprimer la fonction du tableau.

Alors, comment s'assurer que le bon élément DOM est utilisé ?

Évidemment, chaque élément du DOM devrait avoir besoin d'un objet comme celui-ci pour gérer ses propres gestionnaires d'événements. Faire de cet objet de gestion d'événements un attribut de l'élément dom garantit que l'élément dom correct est utilisé

implémentation

Chaque élément DOM nécessite un tel objet, et le on dans chaque objet () et Les méthodes off() sont les mêmes, donc un constructeur est nécessaire pour mettre ces deux méthodes dans son objet prototype.

    function EventManage() {
        this.handlers = {}
    }
    EventManage.prototype = {
        on: function (type, handler) {
            if (!this.handlers[type]) {
                this.handlers[type] = [handler]                return true //避免添加多个事件
            } else {
                this.handlers[type].push(handler)
            }
        },
        off: function (type, handler) {
            for (var i = 0; i < this.handlers[type].length; i++) {
                if (this.handlers[type][i].toString() == handler.toString()) {
                    this.handlers[type].splice(i, 1);
                }
            }
        }
    }

Avec ces deux méthodes, chaque objet peut ajouter et supprimer des gestionnaires d'événements par lui-même. Cependant, pour écouter les événements, vous devez toujours vous fier aux méthodes fournies par JavaScript, utilisez donc addEventListner() et. attachEvent() pour écouter les événements :

    var EventUtil = {};
    EventUtil.on = function (ele, type, handler) {
        if (!ele.event) {
            ele.event = new EventManage();
            console.log(ele.event.handlers)
        }
        var isNewType = ele.event.on(type, handler);
        var fire = function () {            for (var i = 0; i < ele.event.handlers[type].length; i++) {
                ele.event.handlers[type][i]();
            }
        }        if (isNewType) {            if (ele.addEventListener) {
                ele.addEventListener(type, fire, false);
            } else {
                ele.attachEvent("on" + type, fire)
            }
        }
    }
    EventUtil.off = function (ele, type, handler) {
        ele.event.off(type, handler);
    }

Une chose à noter ici est que chaque fois que vous utilisez EventUtil.on(), une fonction fire sera redéfinie et addEventListener() ajoutera plusieurs événements à le même type d'événement. Le même gestionnaire d'événements, vous devez donc déterminer si ce type d'événement est nouveau. Si tel est le cas, utilisez addEventListener() pour écouter ce type d'événement.

Exemple d'utilisation :

var btn=document.getElementById(“btn”);
EventUtil.on(btn,”click”,function(){ 
  console.log(“11”);
}); EventUtil.on(btn,”click”,function(){ 
  console.log(“22”); }); EventUtil.off(btn,”click”,function(){ 
  console.log(“11”); });

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!