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 相关文章推荐
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
js常用代码段收集
Oct 28 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 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 ss7.5的数据调用 (笔记)
2010/03/08 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
Prototype RegExp对象 学习
2009/07/19 Javascript
模仿jQuery each函数的链式调用
2009/07/22 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
四年级数学教学反思
2014/02/02 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
导游词之日月潭
2019/11/05 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python