JavaScript で匿名イベント ハンドラーを削除する方法

addEventListener() およびattachEvent() を使用してイベント ハンドラーを DOM 要素にバインドする場合、匿名関数が渡されると、対応する RemoveEventListener() および detachEvent() Bound を使用して匿名ハンドラーを削除できません。したがって、使用する場合は関数式を渡す必要があります。

それでは、バインドとバインド解除に匿名関数を使用したい場合、どうやって解決すればよいでしょうか?

Idea

これら 2 つの関数はどちらもバインド解除用の匿名関数を受け入れないため、これらの関数に依存してイベントを管理することはできません。そのため、イベントを処理するカスタム オブジェクトを定義します。
イベント ハンドラーの本質は、オブジェクトでイベントが発生すると、そのイベントをリッスンする関数が実行されることです。

DOM 要素は、複数のイベント タイプのハンドラーにバインドされる場合があります。たとえば、クリックすると色が変わり、マウスオーバーすると色が大きくなります。

1 つのイベント タイプは複数のイベント ハンドラーにバインドされる場合があります。たとえば、マウスオーバーが発生すると、色が変わり、大きくなります。

したがって、このイベント オブジェクトには、この DOM 要素にバインドされたすべてのイベント ハンドラーを保存するプロパティが必要です。また、追加用と削除用の 2 つのメソッドも必要です。

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

イベントが発生すると、このオブジェクト内の対応するイベント タイプの配列内のすべての関数が呼び出されます。

つまり、バインディング イベントは対応する配列に関数を追加することであり、バインド解除イベントは配列から関数を削除することです。

では、正しい DOM 要素が操作されていることを確認するにはどうすればよいでしょうか?

明らかに、各 DOM 要素には、独自のイベント ハンドラーを管理するためにこのようなオブジェクトが必要です。このイベント管理オブジェクトを dom 要素の属性にすることで、実装

各 DOM 要素がそのようなオブジェクトを必要とし、各オブジェクトの on() メソッドと off() メソッドが同じであることが保証されます。したがって、これら 2 つのメソッドをプロトタイプ オブジェクトに組み込むにはコンストラクターが必要です。

    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);
                }
            }
        }
    }

各オブジェクトのこれら 2 つのメソッドを使用すると、イベント ハンドラーを自分で追加および削除できます。ただし、イベントをリッスンするには、やはり JavaScript によって提供されるメソッドに依存する必要があるため、addEventListner() とattachEvent() を使用します。イベントをリッスンします:

    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);
    }

ここで注意すべき問題は、EventUtil.on() を使用するたびに fire 関数が再定義され、addEventListener() が同じイベント タイプに複数の同一のイベント ハンドラーを追加することです。イベント タイプが新しく追加されたかどうかを判断する必要があります。追加されている場合は、addEventListener() を使用してこのイベント タイプをリッスンします。

使用例:

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”); });

以上がJavaScript で匿名イベント ハンドラーを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。