2015-06-23

javascript自定义事件

浏览器内置了一些javascript的方法，比如说click, mouseover, mousein … 可以在用户进行了一些浏览器内置的默认行为（点击，鼠标滑过DOM）的时候会触发。
所谓自定义事件，就是有别于有别于带有浏览器特定行为的事件(类似click, mouseover, submit, keydown等事件)，事件名称可以随意定义，可以通过特定的方法进行添加，触发以及删除。
jQuery的有个bind方法，可以添加一些用户自定义的事件，再用trigger的方法来触发。

我们先实现一个事件对象用来管理自定义事件：

var Event = {
    _listeners: {},    
    addEvent: function(type, fn) {
        if (typeof this._listeners[type] === "undefined") {
            this._listeners[type] = [];
        }
        if (typeof fn === "function") {
            this._listeners[type].push(fn);
        }    
        return this;
    },
    fireEvent: function(type) {
        var arrayEvent = this._listeners[type];
        if (arrayEvent instanceof Array) {
            for (var i=0, length = arrayEvent.length; i < length; i += 1) {
                if (typeof arrayEvent[i] === "function") {
                    arrayEvent[i]({
                        type: type
                    });    
                }
            }
        }    
        return this;
    },
    removeEvent: function(type, fn) {
        var arrayEvent = this._listeners[type];
        if (typeof type === "string" && arrayEvent instanceof Array) {
            if (typeof fn === "function") {
                for (var i=0, length = arrayEvent.length; i < length; i += 1){
                    if (arrayEvent[i] === fn){
                        this._listeners[type].splice(i, 1);
                        break;
                    }
                }
            } else {
                delete this._listeners[type];
            }
        }
        return this;
    }
};

通过代码我们可以发现，其实所谓的自定义事件就是创建一个function列表管理对象，可以添加、删除和触发function的对象。测试使用自定义事件代码：

// 添加自定义事件
var fn1, fn2;
Event.addEvent("alert", fn1 = function() {
    alert("第一个弹出！");
}).addEvent("alert", fn2 = function() {
    alert("第二个弹出！");
});

// 按钮绑定事件，用来清除自定义事件
var elButton1 = document.getElementById("button1"),
    elButton2 = document.getElementById("button2");

elButton1.onclick = function() {
    Event.removeEvent("alert");
    alert("alert事件清除成功！");
    
    // 此时后一个按钮卧底了，故隐藏
    elButton2.style.display = "none";
};

elButton2.onclick = function() {
    Event.removeEvent("alert", fn1);
    alert("第一个alert清除成功！");
};

// 点击文档，触发自定义事件
document.onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    
    // 如果文档点击元素标签名不是input
    if (!target || !/input|pre/i.test(target.tagName)) {
        Event.fireEvent("alert");
    }
};

对javascript的事件自定义，只是其庞大事件系统的冰山一角。
口水横飞的讲了这么多，不知道你会不会有这样的疑问。
自定的这些事件有个蛋用啊！？

自定义事件的使用总结如下：

自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听那些事件。说简单点就是我们希望在程序运行的时候，路线可能会有很多，如果程序运行到了一个特殊的地方，我们希望立刻运行用户注册的方法里面的代码，运行完毕后再继续运行，这个过程叫做监听。
事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。对象可以发布事件，用来表示在该对象生命周期中某个有趣的时刻到了。然后其他对象可以观察该对象，等待这些有趣的时刻到来并通过运行代码来响应。

参考页面：
[1].漫谈js自定义事件、DOM/伪DOM自定义事件
[2].JavaScript: 实现自定义事件

感谢您的阅读，有不足之处请在评论为我指出！

yangyuji

一个屌丝，码农，程序猿

javascript自定义事件