<div></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, origType: "click", selector: "#center",//选择器,用来区分不同事件源 type: "click" } 1: { data: undefined/{...}, guid: 3, handler: function dot(){…}, namespace: "", needsContext: false, origType: "click", selector: "#center", type: "click" } 2: { data: undefined, guid: 3, handler: function dot(){…}, namespace: "", needsContext: false, origType: "click", selector: undefined, type: "click" } delegateCount: 2,//委托事件数量，有selector的才是委托事件 length: 3 } } handle: function ( e ) {…}/*事件处理主入口*/{ elem: document//属于handle对象的特征 } }
jQuery的处理和Dean Edwards的跨浏览器兼容事件添加处理类似，比如为每一个函数添加guid；使用events对象存放响应事件列表，有一个总的事件处理入口handle等。
jQuery做了哪些改进？
1）事件数据不再直接保存在节点上，而是使用jQuery缓存系统内（内部使用的缓存jQuery._data方式存取）
2）事件委托：绑定到当前节点（例子中当前节点是document根节点）的处理函数不仅仅包含当前节点触发事件（click）响应时处理的事件（例子中selector为undefined时对应的处理函数dot）;还代理了其他节点（例子中的#center节点）触发事件（click）响应时处理的事件（例子中selector为"#center"对应的处理事件doHandler和dot）；委托机制在后续分析。
3）增加了很多功能数据，比如命名空间namespace:这个主要用在自定义事件自定义触发，比如$(document).on("chua.click",'#center',dot)，主动触发$("#center").trigger("chua.click")。还有额外数据data:虽然没有看到那个地方有被用到。
到此jQuery的事件结构就清楚了。后面再分析事件的绑定和触发以及委托原理。
您可能感兴趣的文章: