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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
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桌面中心(四) 数据显示
2007/03/11 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
广告显示判断
2006/08/31 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
制定岗位职责的原则
2013/11/08 职场文书
零件设计自荐信范文
2013/11/27 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
求职简历中自我评价
2014/01/28 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
2014感恩节演讲稿大全
2014/10/11 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
尝试使用Python爬取城市租房信息
2022/04/12 Python
Golang连接并操作MySQL
2022/04/14 MySQL
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers