此模块用于提供自定义事件,并把实现此接口的对象变成一个事件发送器。
//==================================================
// 事件发送器模块
//==================================================
(function(global,DOC){
var dom = global[DOC.URL.replace(/(#.+|\W)/g,'')];
dom.define("emitter","data", function(){
var fireType = "", blank = ""
var ensure = function(array,neo){
var obj = {}
for(var i=0,el;el = array[i++];){
obj[ el.uuid ] =1
}
if(!obj[neo.uuid]){
array.push(neo)
};
}
var events = dom.events = {
special:{},//用于处理个别的DOM事件
bind : function(type, callback, phase){
//它将在原生事件发送器或任何能成为事件发送器的普通JS对象添加一个名叫uniqueID的属性,用于关联一个缓存体,
//把需要的数据储存到里面,而现在我们就把一个叫@events的对象储放都它里面,
//而这个@event的表将用来放置各种事件类型与对应的回调函数
var target = this, table = dom.data( target,"@events") || dom.data( target,"@events",{});
if(!table || !callback) return ;
var bag = callback.callback ? callback :{
callback:callback,
uuid: dom.uuid++,
type:type
}
//确保UUID，bag与callback的UUID一致
bag.callback.uuid = bag.uuid;
//原生的DOM事件是不允许绑定同一个回调函数,详见下面的测试
// function callback(){ alert(1) }
// document.addEventListener("click",callback,false)
// document.addEventListener("click",callback,false)
type = bag.type;
var queue = table[ type ] = table[ type ] || [];
ensure(queue,bag);
if(dom["@emitter"] in target){//如果是原生的事件发送体
var special = events.special[ bag.type ] , setup = events.setup, tag = "@"+type
if(special){
type = special.type || type
tag = (bag.live ? "@live_" :"@special_" )+type;
setup = bag.live ? special.liveSetup : special.setup
}
bag.tag = tag;
if(!table[tag]){
dom.log("setup "+type+" event...")
setup(target, type, events.handle, !!phase);
table[tag] = 1
}
}
},
unbind:function(type ,bag, phase){
var target = this, table = dom.data( target,"@events") ;
if(!table) return;
if(typeof type === "string"){//如果指定了要移除何种事件类型
type = bag && bag.type || type;
var queue = table[ type ];
if(queue){
var callback = bag.callback || bag;
queue = callback ? table[type].filter(function(bag) {
return bag.callback != callback;
}) : [];
if(dom["@emitter"] in target){//如果是原生的事件发送体
var special = events.special[ type ] , teardown = events.teardown, tag = "@"+type
if(special){
type = special.type || type
tag = (bag.live ? "@live_" :"@special_" )+type;
teardown = bag.live ? special.liveTeardown : special.teardown
}
var length = queue.filter(function(bag){
return bag.tag == tag
}).length;
if(!length){
teardown(target, type, events.handle, !!phase) ;
dom.log("teardown "+type+" event...")
delete table[tag]
}
}
}
}else{
for (type in table ) {
if(type.charAt(0) !== "@")
events.unbind( target, type );
}
}
},
fire:function(type){
var target = this, table = dom.data( target,"@events") ,args = dom.slice(arguments,1), event
if(!table) return;
event = type instanceof jEvent ? type : new jEvent(type);
event.target = target;
event.fireArgs = args;
if( dom["@emitter"] in target){
var cur = target, ontype = "on" + type;
do{//模拟事件冒泡与执行内联事件
events.handle.call(cur, event);
if (cur[ ontype ] && cur[ ontype ].call(cur) === false) {
event.preventDefault();
}
cur = cur.parentNode ||
cur.ownerDocument ||
cur === target.ownerDocument && global;
} while (cur && !event.isPropagationStopped);
if (!event.isDefaultPrevented) {//模拟默认行为 click() submit() reset() focus() blur()
var old;
try {
if (ontype && target[ type ]) {
// 不用再触发内事件
old = target[ ontype ];
if (old) {
target[ ontype ] = null;
}
fireType = type;
target[ type ]();
}
} catch (e) {
dom.log("dom.events.fire("+type+") throw errer " + e);
}
if (old) {
target[ ontype ] = old;
}
fireType = blank;
}
}else{//普通对象的自定义事件
events.handle.call(target, event);
}
},
filter:function(target, parent, expr){
if(dom.contains(parent,target) ){
if(typeof expr === "function" ){
return expr.call(target)
}else{
return dom.matchesSelector(target, expr) ;//需要travel模块
}
}
},
handle: function( event ) {
if(fireType === event.type)
return undefined;
var queue = dom.data(this,"@events")[event.type];
if ( queue ) {
if(!event.uuid){
event = events.fix(event);
}
event.currentTarget = this;
var emitter = event.target, result,
//取得参数（只有自定义才有多个参数）
args = "fireArgs" in event ? [event].concat(event.fireArgs) : arguments;
//复制数组以防影响下一次的操作
queue = queue.concat();
//开始进行拆包操作
for ( var i = 0, bag; bag = queue[i++]; ) {
//如果是事件代理，确保元素处于enabled状态，并且满足过滤条件
if(bag.live && emitter.disabled && !events.filter(emitter, this, bag.live) ){
continue;
}
//取得回调函数
result = bag.callback.apply( emitter, args );
if ( result !== undefined ) {
event.result = result;
if ( result === false ) {
event.preventDefault();
event.stopPropagation();
}
}
if ( event.isImmediatePropagationStopped ) {
break;
}
}
}
return event.result;
},
fix :function(event){
if(event.uuid){
return event;
}
var originalEvent = event
event = new jEvent(originalEvent);
for(var prop in originalEvent){
if(typeof originalEvent[prop] !== "function"){
event[prop] = originalEvent[prop]
}
}
event.wheelDelta = 0;
//mousewheel
if ("wheelDelta" in originalEvent){
var detail = originalEvent.wheelDelta;
//opera 9x系列的滚动方向与IE保持一致，10后修正
if(global.opera && global.opera.version()
示例：
dom.require("ready,class,emitter",function(){
var A = dom.factory({
include:dom.emitter,
init:function(){
this.defineEvents("click,mouseover")
}
});
var a = new A;
a.bind("click",function(){
alert([].slice.call(arguments))//[object Event],1,2,3
})
a.fire("click",1,2,3);
a.onMouseover(function(){
alert("司徒正美")
});
a.fire("mouseover")
dom.log(a)
})
依次弹出两个窗口,第一个为"1,2,3",第二个为"司徒正美".在firebug下查看a实例的构造如下:
第二个例子,只依赖emitter模块.
dom.require("emitter",function(){
var a = {};
dom.mix(a,dom.emitter);
a.bind("data",function(){
alert("11111111")
});
a.bind("data",function(e){
alert([].slice.call(arguments));//[object Event],3,5
alert(e.type) //data
});
a.fire("data",3,5)
});