javascript事件之：jQuery事件中Data数据结构

　　之前我们模拟过jQuery的自定义事件，数据是直接绑定在元素上面。但我们知道，那样容易引起内存泄露。我们看看jQuery是如何做到的。

　　其实，jQuery的事件是基于Data开发的，其核心的三个方法add(), remove()和trigger()都是和Data对象在打交道。让我们来剖析jQeury事件的核心：Data数据结构。

　　首先在jQuery源码中把其console出来。

jQuery.event = {

global: {},

add: function( elem, types, handler, data, selector ) {  6     console.log(elemData)
},
...

var $clickTrigger = $("#clickTrigger");
//var $doTrigger = $("#doTrigger");
$clickTrigger.on("click", function(a){
    console.log(1)
})
$clickTrigger.on("click", function(b){
    console.log(2)
})
$clickTrigger.on("mouseover", function(c){
    console.log(3)
})

html代码

<input id="clickTrigger" type="button" value="click事件" />

这个时候我们可以看到的结构是：

var elemData = {
    events: {
        click:[//还有一个delegateCount属性
            {
                data: undefined,//传递的参数
                guid: 1,//当前事件唯一标识，根据绑定顺序分配
                handler: function(a){},//绑定的是普通函数
                namespace: "",//命名空间
                needsContext: undefined,//委托，伪类的写法
                origType: "click",//原始的事件类型，如mouseenter
                selector: undefined,//放的是委托元素
                type: "click"//现在的事件类型，如mouseover
            },
            {
                data: undefined,
                guid: 2,
                handler: function(b){},
                namespace: "",
                needsContext: undefined,
                origType: "click",
                selector: undefined,
                type: "click"
            }
        ],
        mouseover:[//还有一个delegateCount属性
            {
                data: undefined,
                grid: 3,
                handler: function(c){},
                namespace: "",
                needsContext: undefined,
                origiType: "mouseover",
                selector: undefined,
                type: "mouseover"
            }
        
        ]        
    },
    handle: function(e){}//绑定事件的真正函数
}

这个就是jQuery事件对象Data的结构：

events对象：绑定函数类型的集合，每个事件对应一个数组（可能绑定多次） 

handler方法：指的是绑定事件的真正函数

我们对红色部分解释一下

data：传递的参数

如：

var $clickTrigger = $("#clickTrigger");
$clickTrigger.on("click", 100, function(a){
    console.log(a.data)
})

这个时候，我们看到的data是：data: 100

guid: 唯一的标识符

handler:绑定事件的普通函数

namespace:类型外的二次标志

如：

var $clickTrigger = $("#clickTrigger");
$clickTrigger.on("click.bbb", function(a){
    console.log(1)
})

得出：namespace:bbb

应用：比如说我们给document绑定了很多事件，但是我只想取消绑定其中一个函数

var $clickTrigger = $("#clickTrigger");
$clickTrigger.on("click.bbb", function(a){
    console.log(1)
})
$clickTrigger.on("click.aaa", function(a){
    console.log(2)
})
$clickTrigger.off("click.aaa")

点击只会输出“1”

needsContext:默认是undefined，有委托并且委托的元素不是伪类的时候为false，有委托并且委托的元素是伪类的时候为true

var $clickTrigger = $("#clickTrigger");
$clickTrigger.on("click","i", function(a){
console.log(1)
})

这个时候needsContext：false

var $clickTrigger = $("#clickTrigger");
$clickTrigger.on("click","i:first", function(a){
console.log(1)
})

这个时候needsContext：true

origType,type:有的时候由于浏览器的兼容性需要模拟事件，比如说mouseenter

var $clickTrigger = $("#clickTrigger");
$clickTrigger.on("mouseenter", function(a){
    console.log(1)
})

这个时候origType：mouseenter，type：mouseover

selector:

var $clickTrigger = $("#clickTrigger");
$clickTrigger.on("click","i", function(a){
console.log(1)
})

selector: "i"

这个就是jQuery事件的Data数据结构及其详细解释。

下次有时间再探讨下jQuery下关于事件的具体代码实现。