- 需要管理的handler更少。
- 占用的内存更少(创建的驻留在内存中的handler少了)。
- DOM元素与代码更少的绑定。
- DOM变更后(如添加dom节点)无须重新绑定事件处理器。
它也有如下不足
- 并非所有的事件都能冒泡,如load, change, submit, focus, blur(jQuery间接的实现了focus和blur的事件代理)。
- 代理元素的handler管理复杂。
- 不好模拟用户触发事件(jQuery实现了)。
很多开源框架中都加入了事件代理API,比如yui、sencha touch、gaea等。jQuery的事件代理提供给客户端程序员的有以下几个函数
- .live 使用document对象代理事件
- .delegate 根据选择器指定特定的元素代理事件
- .die 解除使用live代理事件的绑定
- .undelegate 解除使用delegate代理事件的绑定
以下是delegate的代码
1
2
3
|
delegate:
function
( selector, types, data, fn ) {
return
this
.live( types, data, fn, selector );
},
|
可以看到它依赖于live,实际上live的第四个参数是专门给delegate用的。并不提供给客户端程序员。live和die一个each调用就生成了这两个方法。
1
2
3
4
5
6
7
8
|
jQuery.each([
"live"
,
"die"
],
function
( i, name ) {
jQuery.fn[ name ] =
function
( types, data, fn, origSelector
/* Internal Use Only */
) {
var
type, i = 0, match, namespaces, preType,
selector = origSelector ||
this
.selector,
context = origSelector ?
this
: jQuery(
this
.context );
...
};
});
|
即生成的live和die方法都具有四个参数分别是types, data, fn, origSelector。
types 事件类型,如“click”
data 是数据(js对象),可以在回调函数中通过事件对象获取到。
fn 事件handler
origSelector css选择器,字符串如“#id”
这里比较奇怪的是第二个参数,因为多数时候第二个参数我们传的是函数类型。如下
1
2
3
|
$(
'#id'
).live(
'click'
,
function
(){
});
|
1
2
3
4
|
if
( data ===
false
|| jQuery.isFunction( data ) ) {
fn = data || returnFalse;
data = undefined;
}
|
如果第二个参数data为false将使用returnFalse,returnFalse在之前系列中提到过,是一个函数,里面仅一句:返回false。
如果data本身就是function类型的,那么将把data赋值给fn。既然第二个参数本意就是函数,干嘛那么费劲将第二个参数与第三个参数调换呢。不如定义时直接换了,如
jQuery.fn[ name ] =
function
( types, fn, data, origSelector
/* Internal Use Only */
)
|
这是遗留问题,后续jQuery版本为了与之前版本参数保持一致。
live这段代码
1
2
3
4
|
if
( type ===
"hover"
) {
types.push(
"mouseenter"
+ namespaces,
"mouseleave"
+ namespaces );
continue
;
}
|
这是jQuery自己加的事件,即可以如下使用
1
|
$(
'#id'
).live(
"hover"
, fn);
|
这个需结合liveHandler来看,liveHandler中对mouseenter/mouseleave单独做了处理。
再看看使用live时其内部流程是如何的
1. live中调用 jQuery.event.add,此时第二个参数是以字符串"live"开头的。会将data,selector,fn等置入第三个参数。
1
2
3
|
jQuery.event.add( context[j],
"live."
+ liveConvert( type, selector ),
{ data: data, selector: selector, handler: fn, origType: type, origHandler: fn, preType: preType } );
|
1
|
special.add.call( elem, handleObj );
|
1
2
3
4
5
6
7
8
9
|
add:
function
( handleObj ) {
jQuery.event.add(
this
,
liveConvert( handleObj.origType, handleObj.selector ),
jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid}) );
},
|
会发现,又是调用jQuery.event.add,即一个递归调用。这是jQuery事件代理部分较难理解的一部分。
live的实现两次调用jQuery.event.add作用不同。第一次是往elemData.events中添加key为live的对象,第二次是添加key为真正的事件(如click)的对象。第二次的handler是私有的liveHandler。
即给代理元素(如document对象)添加的真正事件是click,但响应时会从live上取fn。知道了live存放数据的结构,那么die的实现就好理解了。