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

小云云

リリース： 2018-03-17 10:59:50

オリジナル

2828 人が閲覧しました

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 サイトの他の関連記事を参照してください。