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 相关文章推荐
JavaScript 继承详解 第一篇
Aug 30 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
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
PHP4实际应用经验篇(2)
2006/10/09 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python之web模板应用
2017/12/26 Python
python调用API实现智能回复机器人
2018/04/10 Python
python实现抖音点赞功能
2019/04/07 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
python 实现客户端与服务端的通信
2020/12/23 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
打架检讨书300字
2014/02/02 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
python实现A*寻路算法
2021/06/13 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
部分武汉产收音机展览
2022/04/07 无线电