原生js实现on与off-方法

jiezi

6 年前

使用过 jQuery 的同学，应该对事件绑定方法 .on() .off() 有一定的了解。在个人类库 jTool 中实现了这两个方法，这里就来细说下原生实现方式。

以下为个人类库 jTool 中 Event 实现方式。
代码中使用到一个基础方法对象 utilities，该对象为 jTool 的基础类。如果想了解更多，可以通过点击进入查看原码。

首先通过一个空架子来了解下实现逻辑，核心实现在 getEventObject() 方法内的包装函数

var Event = {
    // 绑定
    on: function(event, querySelector, callback, useCapture){return this.addEvent(this.getEventObject(event, querySelector, callback, useCapture));
    }，// 解除绑定
    off: function(event, querySelector) {return this.removeEvent(this.getEventObject(event, querySelector));
    },
    // 获取 jTool Event 对象
    getEventObject: function (event, querySelector, callback, useCapture){
        // 事件代理实现核心
        // 注意: 这个方法为包装函数, 此处的 this 为触发事件的 Element
        var fn = callback;
            callback = function(e){
                // 验证子选择器所匹配的 nodeList 中是否包含当前事件源 或 事件源的父级
                // 注意: 这个方法为包装函数, 此处的 this 为触发事件的 Element
                var target = e.target;
                while(target !== this){if([].indexOf.call(this.querySelectorAll(querySelector), target) !== -1){fn.apply(target, arguments);
                        break;
                    }
                    target = target.parentNode;
                }
            };
    
        return {
                eventName: event + querySelector,
                type: event,
                querySelector: querySelector,
                callback: callback || utilities.noop,
                useCapture: useCapture || false
            };
    },
    // 增加事件, 并将事件对象存储至 DOM 节点
    addEvent: function (eventList){ }，// 删除事件, 并将事件对象移除出 DOM 节点
    removeEvent: function (eventList){}}

event: 事件名, 如 ‘click’，并支持 ‘click.scope1’ 事件域的方法(虽然支持，但由于暂时没有使用场景。所以仅对参数进行了处理，功能上没有实现)
querySelector: 子选择器
callback: 事件触发后执行的函数
useCapture: 指定事件是否在捕获或冒泡阶段执行.true – 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行
eventList: 由 .getEventObject() 方法生成的 Event 对象，

通过调用 jTool 实例的 on 方法，传入参数
调用getEventObject() 获取事件对象
调用addEvent() 方法进行事件绑定

通过调用 jTool 实例的 off 方法，传入参数

调用 getEventObject() 获取事件对象

调用 removeEvent() 方法解除事件绑定

var _Event = {on: function(event, querySelector, callback, useCapture) {// 将事件触发执行的函数存储于 DOM 上, 在清除事件时使用},
    
    off: function(event, querySelector) {return this.removeEvent(this.getEventObject(event, querySelector));
    },
    
    bind: function(event, callback, useCapture) {return this.on(event, undefined, callback, useCapture);
    },
    
    unbind: function(event) {return this.removeEvent(this.getEventObject(event));
    },
    // 获取 jTool Event 对象
    getEventObject: function(event, querySelector, callback, useCapture) {// $(dom).on(event, callback);
        if (typeof querySelector === 'function') {
            useCapture = callback || false;
            callback = querySelector;
            querySelector = undefined;
        }
        // event callback 为必要参数
        if (!event) {utilities.error('事件绑定失败, 原因: 参数中缺失事件类型');
            return this;
        }
    
        // 子选择器不存在 或 当前 DOM 对象包含 Window Document 则将子选择器置空
        if(!querySelector || utilities.type(this.DOMList[0]) !== 'element'){querySelector = '';}
        // #Event003 存在子选择器 -> 包装回调函数, 回调函数的参数
        // 预绑定功能实现
        if(querySelector !== ''){
            var fn = callback;
            callback = function(e){
                // 验证子选择器所匹配的 nodeList 中是否包含当前事件源 或 事件源的父级
                // 注意: 这个方法为包装函数, 此处的 this 为触发事件的 Element
                var target = e.target;
                while(target !== this){if([].indexOf.call(this.querySelectorAll(querySelector), target) !== -1){fn.apply(target, arguments);
                        break;
                    }
                    target = target.parentNode;
                }
            };
        }
        var eventSplit = event.split(' ');
        var eventList = [],
            eventScopeSplit,
            eventObj;
    
        utilities.each(eventSplit, function(i, eventName) {if (eventName.trim() === '') {return true;}
    
            eventScopeSplit = eventName.split('.');
            eventObj = {
                eventName: eventName + querySelector,
                type: eventScopeSplit[0],
                querySelector: querySelector,
                callback: callback || utilities.noop,
                useCapture: useCapture || false,
                // TODO: nameScope 暂时不用
                nameScope: eventScopeSplit[1] || undefined
            };
            eventList.push(eventObj);
        });
        return eventList;
    },
    
    // 增加事件, 并将事件对象存储至 DOM 节点
    addEvent: function(eventList) {
        var _this = this;
        utilities.each(eventList, function (index, eventObj) {utilities.each(_this.DOMList, function(i, v){v.jToolEvent = v.jToolEvent || {};
                v.jToolEvent[eventObj.eventName] = v.jToolEvent[eventObj.eventName] || [];
                v.jToolEvent[eventObj.eventName].push(eventObj);
                v.addEventListener(eventObj.type, eventObj.callback, eventObj.useCapture);
            });
        });
        return _this;
    },
    
    // 删除事件, 并将事件对象移除出 DOM 节点
    removeEvent: function(eventList) {
        var _this = this;
        var eventFnList; // 事件执行函数队列
        utilities.each(eventList, function(index, eventObj) {utilities.each(_this.DOMList, function(i, v){if (!v.jToolEvent) {return;}
                eventFnList = v.jToolEvent[eventObj.eventName];
                if (eventFnList) {utilities.each(eventFnList, function(i2, v2) {v.removeEventListener(v2.type, v2.callback);
                    });
                    v.jToolEvent[eventObj.eventName] = undefined;
                }
            });
        });
        return _this;
    }
};

.on()与 .bind() 都可以进行事件绑定，区别在于 .on() 使用事件代理。事件代理是一种事件预绑定机制，该机制可以在事件节点不存在的情况下，将事件绑定至已存在父级节点之上的方式。

随笔一行
这是前端最好的时代，这也是前端最坏的时代。众多前端框架满天飞，随着 jQuery 在前端行业的慢慢弱化，总是会有一种斯人远去，何者慰籍的感觉。互勉吧，各位。

另推荐个表格组件 gridManager

原生js实现on与off-方法

实现方式

一个空壳子

参数说明

on 的实现逻辑

off 的实现逻辑

完整 Event 对象