代码改变世界

(五)jQuery.extend 代码段

2012-02-12 15:00  kwjlk  阅读(301)  评论(0编辑  收藏  举报

继续分析event中剩余的remove、trigger方法,并附带完全理解handle方法。

// Detach an event or set of events from an element
remove: function(element, type, handler) {
if (element.events)
if (type && element.events[type])
if ( handler )
delete element.events[type][handler.guid];
else
for ( var i in element.events[type] )
delete element.events[type][i];
else
for ( var j in element.events )
this.remove( element, j );
},
trigger: function(type,data,element) {
// Touch up the incoming data
data = data || [];
// Handle a global trigger
if ( !element ) {
var g = this.global[type];
if ( g )
for ( var i = 0; i < g.length; i++ )
this.trigger( type, data, g[i] );
// Handle triggering a single element
} else if ( element["on" + type] ) {
// Pass along a fake event
data.unshift( this.fix({ type: type, target: element }) );
// Trigger the event
element["on" + type].apply( element, data );
}
},
handle: function(event) {
if ( typeof jQuery == "undefined" ) return;
event = event || jQuery.event.fix( window.event );
// If no correct event was found, fail
if ( !event ) return;
var returnValue = true;
var c = this.events[event.type];
for ( var j in c ) {
if ( c[j].apply( this, [event] ) === false ) {
event.preventDefault();
event.stopPropagation();
returnValue = false;
}
}

return returnValue;
}

基于之前对events属性和for .. in 的分析,这里handle已经基本上被理解了。handle方法通过判断DOM events的类型执行jQuery对象上为其添加的响应方法。但是这里需要注意returnValue的作用。不要和handle后面fix中的returnValue混淆。这里只是一个普通意义的函数内部变量而已。如果,事件的监听方法列表里有任何一个的返回值为false的话handle就会返回false,继而配合前面提到元素的事件处理被jQuery通过hadle方法接管导致该事件不会再继续被接下来的监听方法处理。

然后看第一个remove函数的实现。如果对象上的events不存在的话则不做任何操作。如果不传递type或者传递的type在events上不存在时,remove会移除events中所有事件。如果指定的type存在,但是没有指定handler或者指定的handler对应的guid不存在,则直接移除type下所有的监听方法。type 和 handler正确指定时,则移除指定的handler方法。

trigger函数的实现代码能够回答了我们之前在add中对global属性的疑问。当没有指定element元素时则是对global中所有监听了指定类型事件的元素上触发该事件。这就是为什么add中会把element元素push到global中去了的原因。如果指定了element元素这个参数的话,则会判断指定元素上的对应的on事件是否存在,存在则触发此事件,否则不做任何操作。trigger函数里的element["on"+type].apply(arg)是调用的谁呢?没错,我们可以在add函数的实现代码中找到答案,就是jQuery.event.handle。

现在我们可以对event:{ ... }中的代码做一个小结了:

通过分析add的实现代码,我们就可以看到jQuery的事件处理机制。将元素上指定的事件屏蔽,并定义对应的on-name事件,比如 hover-> onhover。然后将监听方法加入该事件的监听列表里。当调用trigger时则会触发指定的ontype事件。所以,js原事件里是没有on什么的,这是jQuery增加的。