jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构

2020-05-29 06:56:33易采站长站整理

//基于新设置的类型更新special
special = jQuery.event.special[ type ] || {};
// handleObj贯穿整个事件处理
handleObj = jQuery.extend({
type: type,
origType: origType,
data: data,
handler: handler,
guid: handler.guid,
selector: selector,
// For use in libraries implementing .is(). We use this for POS matching in `select`
//"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:(" +
//whitespace + "*((?:-d)?d*)" + whitespace + "*)|)(?=[^-]|$)", "i" )
//用来判断亲密关系
needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
namespace: namespaces.join(".")
}, handleObjIn );
//初次使用时初始化事件处理器队列
if ( !(handlers = events[ type ]) ) {
handlers = events[ type ] = [];
handlers.delegateCount = 0;
//非自定义事件,如果special事件处理器返回false,则只能使用addEventListener/attachEvent
if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
//给元素绑定全局事件
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
}
}
}
//自定义事件绑定
if ( special.add ) {
special.add.call( elem, handleObj );
if ( !handleObj.handler.guid ) {
handleObj.handler.guid = handler.guid;
}
}
//将事件对象handleObj添加到元素的处理列表,代理计数递增
if ( selector ) {
handlers.splice( handlers.delegateCount++, 0, handleObj );
} else {
handlers.push( handleObj );
}
//跟踪那个事件曾经被使用过,用于事件优化
jQuery.event.global[ type ] = true;
}
//防止ie内存泄漏
elem = null;
}

  依然用实例来说明jQuery的事件结构


<div id="#center"></div>
<script>
function dohander(){console.log("dohander")};
function dot(){console.log("dot");}
$(document).on("click",'#center',dohander)
.on("click",'#center',dot)
.on("click",dot);
</script>

  经过添加处理环节,事件添加到了元素上,而且节点对应的缓存数据也添加了相应的数据。结构如下


elemData = jQuery._data( elem );
elemData = {
  events: {
    click: {//Array[3]      0: {
        data: undefined/{...},
        guid: 2, //处理函数的id
        handler: function dohander(){…},
        namespace: "",
        needsContext: false,