js中的前绑定和后绑定详解


Posted in Javascript onAugust 01, 2013

 其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件。在实际开发过程中经常会涉及到前绑定和后绑定。顾名思义,前绑定——还未出生即绑定了某些事件,后绑定——出生后才会绑定的某些事件。
下面,通过一个简单的例子进行阐述,以供大家参考,并对各个方法进行比较:
页面元素:

<div id="main"> 
<a href="#">aaaaaaaaaaaaaaaaaaaaaa</a><br /> 
<a href="#">bbbbbbbbbbbbbbbbbbbb</a><br /> 
<a href="#">ccccccccccccccccccccccccc</a><br /> 
<a href="#">dddddddddddddddddddd</a><br /> 
<a href="#">eeeeeeeeeeeeeeeeeeeeee</a><br /> 
<a href="#">fffffffffffffffffffffffffffffffff</a><br /> 
<a href="#">gggggggggggggggggggg</a><br /> 
<a href="#">hhhhhhhhhhhhhhhhhhhh</a> 
</div> 
<input type="button" value="创建a标签" id="btnCreate" />

页面中的js:
<script src="201102/Scripts/jquery-1.5.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
//后绑定,即动态创建的元素不能拥有绑定的事件!!! 
//1.后绑定 
// $("#main > a ").click(function () { 
// alert($(this).html()); 
// }); 
//2.后绑定 
// $("#main > a").bind("click", function () { 
// alert($(this).text()); 
// }); 
//3.后绑定, 
// $("#main > a").bind({ 
// click: function () { alert($(this).text()); }, 
// mouseover: function () { $(this).css("background-color", "red") }, 
// mouseout: function () { $(this).css("background-color", "white") } 
// }); 
$("#btnCreate").bind({ 
click: function () { $("<br /><a href='#'>我是动态创建的</a>").appendTo("#main"); } 
}); 

//4.前绑定,动态创建的元素也拥有了点击的事件 
// $("#main").delegate("a", "click", function () { 
// alert($(this).text()); 
// }); 
//5.前绑定,live的事件源头的是documentdelegate的源头是具体要绑定的元素,所以delegate的效率比live高多了 
$("#main a").live("click", function () { 
alert($(this).text()); 
}); 
}); 
</script>
Javascript 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
js获取form的方法
May 06 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 #Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 #Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 #Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 #Javascript
JavaScript定时器详解及实例
Aug 01 #Javascript
js渐变显示渐变消失示例代码
Aug 01 #Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 #Javascript
You might like
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
键盘KeyCode值列表汇总
2013/11/26 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
python 写入csv乱码问题解决方法
2016/10/23 Python
python 基础教程之Map使用方法
2017/01/17 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
Python colormap库的安装和使用详情
2020/10/06 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
学期自我评价
2014/01/27 职场文书
后勤个人工作总结
2015/02/28 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
小学生运动会广播
2015/08/19 职场文书
win10清理dns缓存
2022/04/19 数码科技