How to remove anonymous event handlers in JavaScript

When using addEventListener() and attachEvent() to bind an event handler to a DOM element, if an anonymous function is passed in, then the corresponding removeEventListener() and detachEvent() are used This anonymous handler cannot be unbound. So we should pass in a function expression when using it.

So, if you want to use anonymous functions for binding and unbinding, how to solve it?

Idea

Neither of these two functions accept anonymous functions for unbinding, so you cannot rely on them to manage events, so you define a custom object to handle events.
The essence of an event handler is that when an event occurs on an object, the function that listens to the event is executed.

A DOM element may be bound to handlers of multiple event types. For example, the color changes when you click and becomes larger when you mouseover.

An event type may be bound to multiple event handlers. For example, when mouseover happens, it changes color and becomes bigger.

So, this event object should have a property to store all event handlers bound to this DOM element, and there should also be two methods, one for adding and one for deleting.

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

When an event occurs, all functions in the array of the corresponding event type in this object are called.

So the binding event is to add the function to the corresponding array, and the unbinding event is to delete the function from the array.

So how to ensure that the correct DOM element is being operated?

Obviously, each DOM element should need such an object to manage its own event handlers. Making this event management object an attribute of the dom element ensures that the correct dom element is being operated

Implementation

Each DOM element requires such an object, and the on in each object () and off() methods are the same, so a constructor is needed to put these two methods into his prototype object.

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

With these two methods, each object can add and remove event handlers by itself. However, to listen for events, you still need to rely on the methods provided by JavaScript, so use addEventListner() and attachEvent( ) to listen for events:

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

One thing to note here is that every time you use EventUtil.on(), a fire function will be redefined, and addEventListener() will add multiple identical events to the same event type. handler, so you need to determine whether this event type is new. If so, use addEventListener() to listen for this event type.

Usage example:

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

The above is the detailed content of How to remove anonymous event handlers in JavaScript. For more information, please follow other related articles on the PHP Chinese website!