从jQuery的缓存到事件监听
不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性。
首先jQuery1294122065250中的"1294122065250"其实是一个时间戳。看看jQuery的源代码。
由于使用了闭包,这样每一个jQuery对象都有一个expando属性。
属性值jQuery1294122065250="1"的"1"其实是jQuery的缓存的key。
首先了解一下jQuery缓存的相关API:
- data(name):返回元素上储存的相应名字的数据
- data(name,value):在元素上存放数据,同时也返回value。
- jQuery.data(element,key,value):在元素上存放数据,返回jQuery对象。注意:这是一个底层方法。你应当使用.data()来代替。
- jQuery.data([element],[key]): 查询在元素上存放的数据。如果不指定参数,则会返回元素上面存放的所有数据,以Object的形式返回。注意:这是一个底层方法。你应当使用.data()来代替。
- removeData(data):移除元素上的缓存。
把jQuery.data方法是底层方法,data方法调用了该方法。要了解Query的缓存,最好的方法莫过于调试一下jQuery代码了。
$(function(){
var $d1= $("#d1");
$d1.data("key","value");
var v = $d1.data("key");
$d1.click(function(){
alert("click");
});
for (var k in jQuery.cache){
alert(k+"\n"+jQuery.cache[k]);
}
debugger;
});
</script>
<div id="d1" class="">
abc
</div>
上面是一个简单的jQuery代码。在执行完$d1.data("key","value");后。经过调试后可以发现
jQuery是一个全局变量:
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
},
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.data存放着所有的缓存key就是上面提到的DOM属性jQuery*********的值。
下面是读取缓存data函数的关键代码:
var id = elem[ expando ], cache = jQuery.cache, thisCache;
thisCache = cache[ id ];
return typeof name === "string" ? thisCache[ name ] : thisCache;
},
经过调试id 与jQuery********属性一致。直接通过jQuery.cache获取缓存值。
有缓存就必然会有清除缓存,不清除缓存意味着很有可能IE内存泄漏。
// Window isn't included so as not to unbind existing unload events
// More info:
// - http://isaacschlueter.com/2006/10/msie-memory-leaks/
if ( window.attachEvent && !window.addEventListener ) {
window.attachEvent("onunload", function() {
for ( var id in jQuery.cache ) {
if ( jQuery.cache[ id ].handle ) {
// Try/Catch is to handle iframes being unloaded, see #4280
try {
jQuery.event.remove( jQuery.cache[ id ].handle.elem );
} catch(e) {}
}
}
});
}
在window.unload时,jQuery将逐一删除jQuery.cache中的元素。
jQuery的事件绑定也利用了jQuery的缓存。上面的代码监听了#d1.click事件后,经过调试,可以发现,在缓存key为"events"上记录了监听的事件。
通过上面的调试,发现所谓的事件监听或者绑定bind,其实就是在缓存中注册一下处理函数,当事件触发时,将DOM的注册的事件逐一执行就可以了。这其实是一种通用的事件处理机制,事件处理机制是一种典型的观察者设计模式。
从jQuery的缓存到事件监听的更多相关文章
- jQuery EasyUI/TopJUI输入框事件监听
jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...
- jQuery中四种事件监听的区别
原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...
- jquery easyui控件事件监听委托给jquery事件监听,keyup取最新值问题
<div id="<?php echo NS; ?>toolbar"> <div style="padding:5px"> ...
- Zookeeper Curator 事件监听 - 秒懂
目录 写在前面 1.1. Curator 事件监听 1.1.1. Watcher 标准的事件处理器 1.1.2. NodeCache 节点缓存的监听 1.1.3. PathChildrenCache ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- jquery mobile 对手势触控提供了如下几个事件监听:
jquery mobile 对手势触控提供了如下几个事件监听: 复制代码代码如下: tap 当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动 ...
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
- jQuery中的事件监听小记
一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接 ...
- Jquery系列:checkbox 获取值、选中、设置值、事件监听等操作
<div id="divId" class="divTable"> <div class="tableBody"> ...
随机推荐
- [Duilib] 交替背景色设置失败的原因
用列表显示一列数据时,相邻数据常用不同背景色来达到区别的作用.但是设置了Duilib相应属性之后交替背景色效果并未出现.逐一排除之后发现是item的enable属性设置为"false&quo ...
- mysql 用户名密码登陆不上
问题1:刚安装完mysql,设置了用户名密码root,登陆OK的,后来再连怎么也连不上了 操作步骤: 输入:mysql -uroot -proot 提示:ERROR 1045 (28000): Acc ...
- cocoa中获取时间
头文件#import "Foundation/NSCalendarDate.h" + (id)calendarDate; - (int)yearOfCommonEra;- (int ...
- 企业高并发的成熟解决方案(一)video(笔记&知识点)
知识点 答案 什么是高可用(HA) 高并发发生在哪两处 app服务器会出现什么问题,有哪些解决方案? 数据库并发有什么要求? hadoop集群的作用 负载均衡的功能有哪些 负载均衡的分类 哪种负载均衡 ...
- 一个DataTable赋值给另一个DataTable的常用方法
DataView view = new DataView();view.Table = DataTableA;view.RowFilter = "itemType = 'book'" ...
- bzoj3620 似乎在梦中见过的样子
好久没有写过KMP了,今天写个KMP练练手.此题就是枚举左端点暴力,用KMP做到O(n^2) #include<cstdio> #include<cstring> using ...
- 安装linux操作系统--浪潮服务器
一直都是在虚拟机上进行安装linux操作系统,在服务器上安装的很少,也没有碰到过没找到驱动的情况,例如什么raid卡驱动,网卡驱动等异常情况的发生. 这次安装了两台服务器,浪潮的提供的服务器,硬盘是两 ...
- 【leetcode】155 - Min Stack
Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...
- 设计模式知识搜集(c++)
理解设计模式有两种途径,一种是看UML类图,一种是看代码理解实例,UML(一个简单的介绍)看懂了对理解设计模式大有裨益,代码容易陷进去,因此最好能找到适当且易于理解的应用场景,这下面实际上每个都是我收 ...
- Mapreduce执行过程分析(基于Hadoop2.4)——(一)
1 概述 该瞅瞅MapReduce的内部运行原理了,以前只知道个皮毛,再不搞搞,不然怎么死的都不晓得.下文会以2.4版本中的WordCount这个经典例子作为分析的切入点,一步步来看里面到底是个什么情 ...