首页 > 代码库 > javascript事件之：jQuery事件中Data数据结构

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

2024-08-07 23:31:09   217人阅读

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

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

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

  1 jQuery.event = {  2   3 global: {},  4   5 add: function( elem, types, handler, data, selector ) {  6     console.log(elemData)  7 },  8 ...
 1 var $clickTrigger = $("#clickTrigger"); 2 //var $doTrigger = $("#doTrigger"); 3 $clickTrigger.on("click", function(a){ 4     console.log(1) 5 }) 6 $clickTrigger.on("click", function(b){ 7     console.log(2) 8 }) 9 $clickTrigger.on("mouseover", function(c){10     console.log(3)11 })

html代码

<input id="clickTrigger" type="button" value="http://www.mamicode.com/click事件" />

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

 1 var elemData =http://www.mamicode.com/ { 2     events: { 3         click:[//还有一个delegateCount属性 4             { 5                 data: undefined,//传递的参数 6                 guid: 1,//当前事件唯一标识，根据绑定顺序分配 7                 handler: function(a){},//绑定的是普通函数 8                 namespace: "",//命名空间 9                 needsContext: undefined,//委托，伪类的写法10                 origType: "click",//原始的事件类型，如mouseenter11                 selector: undefined,//放的是委托元素12                 type: "click"//现在的事件类型，如mouseover13             },14             {15                 data: undefined,16                 guid: 2,17                 handler: function(b){},18                 namespace: "",19                 needsContext: undefined,20                 origType: "click",21                 selector: undefined,22                 type: "click"23             }24         ],25         mouseover:[//还有一个delegateCount属性26             {27                 data: undefined,28                 grid: 3,29                 handler: function(c){},30                 namespace: "",31                 needsContext: undefined,32                 origiType: "mouseover",33                 selector: undefined,34                 type: "mouseover"35             }36         37         ]        38     },39     handle: function(e){}//绑定事件的真正函数40 }

这个就是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下关于事件的具体代码实现。

 

 

　　

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


联系
我们