百度有啊前端框架分析(自定义事件)

 

    今天早晨从酒店出来，外面下着鹅毛大雪，我的妈呀，我来的时候只穿了一件秋衣，昨天晚上好像所有的天气预报都没有报告今天会下雪，我操，我们的天气预报的仙人们天天在那里说的跟真的一样，这不是骗人吗，但是也没有办法，只能自己想办法怎么能事自己变得更暖和些。

 

       JavaScript中的事件也是如此，浏览器内置的事件不可能帮你把所有的事情都做了，因此遇到特殊事件，必须我们自定义把他实现，那么我们就来来看百度有啊前端JavaScript框架的自定义事件是如何实现的。

        在百度有啊的前端js框架中自定义事件对象主要定义了：

        _srcObjes:事件源集合

        _registeredEvents:事件处理器集合

        observe：用于监听事件处理器的方法

    stopObserving:停止监听事件处理器

    fireEvent：触发事件处理器

下面对这些属性和方法逐一进行分析：

 首先声明了CustEvent，并定义了用于存放事件源对象和事件处理器的两个集合对象

if (!window.CustEvent) { var CustEvent = {}; } CustEvent._srcObjs = [];//事件源对象集合 CustEvent._registeredEvents = [];//已经注册的事件以及事件处理器

在监听事件时：

1.    每个对象上可以注册多个事件

2.    每个事件可以有多个事件处理器，同名的事件处理器会被覆盖掉

 

 

CustEvent.observe = function(obj, event, fun) {
    event = event.toLowerCase().replace(/^on/g, "");//
    var objIndex = CustEvent._srcObjs.indexOf(obj);//
    if (objIndex > -1) {//如果事件源对象集合中存在参数指定的对象
        var B = CustEvent._registeredEvents[A];//这里B是一个以事件名称为键，以事件处理器集合为值的对象
        var handlers = B[event];//取得事件处理器集合
        if (handlers) {//如果该事件已经注册过处理器，会把原来的事件处理器给覆盖掉
            handlers.remove(fun);//把原来同名的处理器删除
            handlers.push(fun);//添加的新的处理器
        } else {//如果没有注册
            B[event] = [fun];
        }
    } else {//如果事件源对象集合中不存在参数指定的对象
        CustEvent._srcObjs.push(obj);
        var B = {};
        B[event] = [fun];
        CustEvent._registeredEvents.push(B);
    }
};
 

在停止监听时：
1.如果指定处理器名称，则只删除该处理器，否则把参数指定事件的所有处理器都删除
2.如果参数指定的对象中没有事件处理器，就把事件源和注册的事件对象全部删除。
CustEvent.stopObserving = function(obj, event, handle) {
    event = event.toLowerCase().replace(/^on/g, "");
    var objIndex = CustEvent._srcObjs.indexOf(obj);
    if (objIndex < 0) {
        return;
    }
    var eventhandlers = CustEvent._registeredEvents[objIndex];
    if (eventhandlers [event]) {
        if (handle) {//如果指定处理器，只删除指定的处理器
            eventhandlers [event].remove(handle);
        } else {//否则删除指定事件所有的处理器
            eventhandlers [event].length = 0;
        }
    }
var E = false;
//判断对象中是否还有事件处理器
    for (var D in eventhandlers) {
        if (eventhandlers [D] && eventhandlers [D].length > 0) {
            E = true;
            break;
        }
}
//如果注册的事件中没有了指定对象的处理器，就把事件源和事件对象去不删除
    if (!E) {
        CustEvent._srcObjs.removeAt(objIndex);
        CustEvent._registeredEvents.removeAt(objIndex);
    }
};
 
触发事件时：
1.如果是浏览器内置事件，直接只执行就可以了。
2.如果是自定义事件，那么就分别执行每个处理器。
CustEvent.fireEvent = function(obj, event) {
    var args = Array.toArray(arguments);
    args.splice(0, 2);
    args.push(event);
event = event.toLowerCase().replace(/^on/g, "");
//浏览器内置事件的处理
    if (obj["on" + event]) {
        obj["on" + event].apply(obj, args);
}
//自定义事件的处理
    var objIndex = CustEvent._srcObjs.indexOf(obj);
    if (objIndex < 0) {
        return;
}
//如果存在事件源对象
    var eventhandlers = CustEvent._registeredEvents[objIndex];
    var handlers = eventhandlers [event];//取得事件的所有处理器
    if (handlers) {//分别执行每个处理器
        for (var i = 0; i < handlers.length; i++) {
            handlers [i].apply(obj, args);
        }
    }
};
 
以上就是百度有啊前端js框架中的自定义事件的实现。如果大家有兴趣可以去研究下jQuery，
和yui中的自定义事件。（尤其是yui3.0中的自定义事件也支持捕获和冒泡，相当牛逼的）