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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
JavaScript函数详解
Nov 17 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
node.js实现登录注册页面
Apr 08 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
jQuery实现朋友圈查看图片
Sep 11 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开发GUI
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
微信小程序日历插件代码实例
2019/12/04 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
人事主管岗位职责
2014/01/30 职场文书
党组织公开承诺书
2014/03/29 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
信息技术国培研修日志
2015/11/13 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL