jquery event与node小记

老是忘，还是记下来算了

jQuery.cache为全局cache

每个jquery对象有一个缓存对象

在第一次调用$('').data(...)时会为此对象生成一个缓存id

elem[ internalKey ] = id = ++jQuery.uuid;internalKey为jquery加载时生成的唯一ID

jQuery.cache[id]可以得到对应元素的cache

cache的结构：

cache={

data:{},//$('').data('a','abc')这个a就放在data里面

events:{},//事件存放在这，如 click:[{handlerObj},{handlerObj}]

handle:function(){}//这个是事件触发时执行的函数，由它是调用dispatch并执行注册的事件函数

//element.addEventListener或attachEvent中放的是它

};

data: function( elem, name, data, pvt /* Internal Use Only */ )

在传了data时，将值设到cache.data中，在没传时基本就是取events与handle了

 

事件机制：

on: function( types, selector, data, fn, /*INTERNAL*/ one ) 用它来注册事件

$('#abc').on({

'click':function(){},

'mousedown':function(){}

},'.btn',[1,2,3])

一般情况下$('#abc').on('click',function(){})

 

注册事件

向cache.data[type]中添加handleObj,注册的函数会被加上一个属性guid用于删除事件

删除事件remove: function( elem, types, handler, selector ) {

遍历cache.data[type]中的handleObj，如果handeObj.handler.guid==handler.guid差不多就可以删了

 

trigger事件：trigger: function( event, data, elem, onlyHandlers ) 

$('#abc').on('my',function(){})

$('#abc').trigger('my')

根据类型构造一个event并找出对应的cache.handle，触发事件，进入dispatch分派具体的handleObj

 

从dispatch方法中可以看出：

给selector的好处是将事件注册在先辈上，可以减少事件源

原理很简单，就是event.target获取事件源，然后向上递归，看有没有先辈元素与selector相匹配

在给定data时必须用完整的注册形式，其实这个data没什么用，它是放在handleObj中，在事件触发时在event中带回来

trigger时给定的data(数组)会加上event之后一同作为参数给注册函数,即handler.apply(element,data)