js自定义事件

用过jQuery的朋友都知道, jQUery提供了一些简单的API让我们可以很轻松的绑定系统事件和各种自定义事件, 对于系统事件, 事件触发时jQuery对应绑定的事件也会触发, 对于自定义事件, 我们要做的也仅仅只需要trigger一下这个事件而已, 那么绑定事件和触发对应事件是怎么完成的呢?

假设我们有一个大的盒子, 盒子中有一些小隔间, 每个小隔间装一种类型的水果, 那么我们绑定事件的过程就是将水果装到对应隔间的过程, 我们从隔间将一种水果拿出来的过程就相当于执行相应事件的过程。

也就是说, 首先我们会有一个大的容器( listeners[]) 里面装着各种类型( type的事件), 每个type有对应了一个事件容器([]), 这个事件容器里面装着所有type类型需要执行的操作, 那么如果我们要执行type类型事件, 只需要从大容器里面找到type类型对应的事件容器, 然后遍历这个容器中所有的操作并执行就好了。
以下是代码实现:

var Event = function() {
    this._listeners = [];
}
Event.prototype = {
    on: function(type, fn) {
        if (typeof this._listeners[type] === "undefined") {
            this._listeners[type] = [];
        }
        if (typeof fn === "function") {
            this._listeners.push(fn);
        }
    },
    trigger: function(type, data) {
        var eventArr = this._listeners[type];
        if (eventArr instanceof Array) {
            for (var i = 0, len = eventArr.length; i & lt; len; i++) {
                if (typeof eventArr[i] === "function") {
                    eventArr[i](data);
                }
            }
        }
    },
    remove: function(type, fn) {
        var eventArr = this._listeners[type];
        if (typeof type === "string" & amp; & amp; eventArr instanceof Array) {
            if (typeof fn === "function") {
                for (var i = 0; i & lt; eventArr.length; i++) {
                    if (fn.toString() === eventArr[i].toString()) {
                        this._listeners[type].splice(i, 1);
                        break;
                    }
                }
            } else {
                this._listeners[type].length = 0;
            }
        }
    }
}

用一个简单的鼠标滚轮来演示自定义事件的执行过程: http: //demo.deanhan.cn/mousewheel/

  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章