jQuery数据绑定原理和事件机制详解
79KB |
更新于2024-09-01
| 92 浏览量 | 举报
收藏
立即下载 jQuery绑定原理简单解析与实现代码分享
jQuery作为一个流行的JavaScript库，提供了许多实用的方法来简化Web开发。其中，绑定原理是jQuery中一个非常重要的概念，涉及到事件处理和数据绑定。下面，我们将詳細地解析jQuery绑定原理，并提供相应的实现代码。
事件处理
在jQuery中，事件处理是通过bind()方法来实现的。bind()方法将事件处理函数绑定到指定的DOM元素上。当用户触发该事件时，相应的事件处理函数将被执行。例如：
```javascript
$('#test').bind('click', function() {
alert(1);
});
```
在上面的代码中，我们使用bind()方法将一个点击事件处理函数绑定到id为"test"的DOM元素上。当用户点击该元素时，将弹出一个警告框，显示数字1。
数据绑定
除了事件处理外，jQuery还提供了data()方法来绑定数据到DOM元素上。data()方法可以将数据绑定到指定的DOM元素上，以便在后续操作中使用。例如：
```javascript
$('#test').data('myData', 'Hello, world!');
```
在上面的代码中，我们使用data()方法将字符串"Hello, world!"绑定到id为"test"的DOM元素上，键名为"myData"。
事件列表
当我们使用bind()方法绑定事件处理函数时，jQuery会生成一个事件列表，该列表中包含了所有绑定的事件处理函数。我们可以使用data()方法来访问该事件列表。例如：
```javascript
alert($.data($('#test')[0], 'events').toSource());
```
在上面的代码中，我们使用data()方法来访问id为"test"的DOM元素的事件列表，并使用toSource()方法将其转换为字符串形式。
缓存机制
在jQuery中，缓存机制是通过cache对象来实现的。当我们使用data()方法绑定数据时，jQuery会将数据存储在cache对象中，以便在后续操作中使用。cache对象的key是通过UUID生成的，而value是要存储的数据。例如：
```javascript
alert($.data($('#test')[0], 'handle').toSource());
```
在上面的代码中，我们使用data()方法来访问id为"test"的DOM元素的缓存数据，并使用toSource()方法将其转换为字符串形式。
绑定原理
绑定原理是jQuery中一个非常重要的概念，它涉及到事件处理和数据绑定。下面是一个简单的绑定原理示例：
```html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
<script type="text/javascript">
window.onload = function() {
alert($.data($('#test')[0], 'events').toSource()); // 时间列表
alert($.data($('#test')[0], 'handle').toSource()); // 执行的函数
$('#test')
.bind('click', function() {
alert(1);
})
.bind('mouseover', function() {
alert(2);
})
.bind('click', function() {
alert(3);
})
.bind('click', function() {
alert(4);
});
alert($.data($('#test')[0], 'events').toSource()); // 时间列表
alert($.data($('#test')[0], 'handle').toSource()); // 执行的函数
};
</script>
</body>
</html>
```
在上面的示例中，我们使用bind()方法将多个事件处理函数绑定到id为"test"的DOM元素上，并使用data()方法来访问事件列表和缓存数据。
jquery绑定原理绑定原理 简单解析与实现代码分享简单解析与实现代码分享
jq里面有一个data的方法,给dom元素绑定相关的数据的。当给dom用jq的方法绑定了事件,会生成对应的时间列表
可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource())
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title></title>
</head>
<body>
<div id=”test”></div>
<script type=”text/javascript” src=”http://common.cnblogs.com/script/jquery.js”></script>
<script type=”text/javascript”>
window.onload = function(){
alert($.data($(‘#test’)[0],’events’));//null
alert($.data($(‘#test’)[0],’handle’));//null
$(‘#test’)
.bind(‘click’,function(){
alert(1)
})
.bind(‘mouseover’,function(){
alert(2)
})
.bind(‘click’,function(){
alert(3)
})
.bind(‘click’,function(){
alert(4)
})
alert($.data($(‘#test’)[0],’events’).toSource());//时间列表
alert($.data($(‘#test’)[0],’handle’).toSource());//执行的函数
}
</script>
</body>
</html>
data是给元素绑定数据的
数据源是 cache对象
当元素绑定数据的时候 会给元素添加一个属性 jQueryxxx xxx为执行jq的时间戳
这里要说明一下,有一个uuid 他是累加的
jQueryxxx的值就是这个uuid
cache 的 key就是这个 uuid
value就是要存的数据
data对于事件的绑定是很重要的…………………………..
代码如下:
function now(){
return +new Date;
};
var win = this,
expando = “jQuery” + now(),
uuid = 0,
cache = {};
win.data = function(elem, name, data){
var id = elem[expando];
if(!id)
id = elem[expando] = ++uuid;
if(name&&!cache[id])
cache[id] = {};
if(data !== undefined)
cache[id][name] = data;
return name
? cache[id][name]
: id;
}
win.removeData = function(elem, name){
下载后可阅读完整内容，剩余8页未读，继续阅读
开通会员，免费下载（低至0.43元/天)
成为会员后, 你将解锁
下载资源随意下
优质VIP博文免费学
优质文库回答免费看
付费资源9折优惠
相关推荐
weixin_38687277
- 粉丝: 10
我的内容管理
展开
最新资源
- 深入学习Hacking Vim技术指南
- MySQL 5.0.27版本Windows安装包指南
- .net 开发的OA系统与B2B及门户平台示例
- 深入浅出Vim编程技巧与应用指南
- Java实现K-Means算法及其应用案例分析
- 局域网内基于VC实现的聊天程序源代码解读
- J2EE入门实战：开放式基金交易平台
- 深入探索Windows Server 2003的管理与提升
- 全球三强防毒软件集合版Virus Chaser发布
- Eclipse整合开发工具（基础篇）全面解析
- 马士兵MySQL学习资料完整总结
- Altiris配置教程：如何拷贝用户配置文件
- BCGControlBar Pro v10.0：Windows界面组件开发包
- jaxmao-tomcat-5.5.20服务器：免费开源解决方案
- exe4j将Java程序转换为可执行exe文件
- VC十六进制编辑器源码解析与应用
- Linux设备驱动V3中文版教程
- 掌握tcptrace：高效TCP端口监听调试工具
- Altiris标准镜像PC配置方法详解
- IIS6.0完整安装包：XP/2000/2003系统必备
- 全面的J2ME浮点数模拟类库功能介绍
- 深入解析面向构件的中间件平台-EOS
- 基于VC的ip_Monitor网络监控软件介绍
- 如何在Windows系统中全面获取硬件信息
