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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Vue实现仿iPhone悬浮球的示例代码
Mar 13 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
mysq GBKl乱码
2006/11/28 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
对python 命令的-u参数详解
2018/12/03 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python定时任务 sched模块用法实例
2019/11/04 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python实现IOU计算案例
2020/04/12 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
创联软件面试题笔试题
2012/10/07 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
中英文自我评价常用句型
2013/12/19 职场文书
迎元旦广播稿
2014/02/22 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
手机银行营销方案
2014/03/14 职场文书
计算机专业自荐信
2014/05/24 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
应届生简历自我评价
2015/03/11 职场文书