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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JavaScript Sort 表格排序
Oct 31 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
Javascript之Date对象详解
Jun 07 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python切片知识解析
2016/03/06 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
中年人生感言
2014/02/04 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
在人间读书笔记
2015/06/30 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
如何使用pdb进行Python调试
2021/06/30 Python
MySQL 四种连接和多表查询详解
2021/07/16 MySQL