信息发布→ 登录 注册 退出

js中的前绑定和后绑定详解

发布时间:2026-01-11

点击量:

 其主要意思就是看我有没有用过前绑定,即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>

标签:# 用过  # bbbbbbbbbbbbbbbbbbbb  # 在实际  # 过程中  # 以供  # 来时  # 经常会  # 其主要  # 定了  # 涉及到  # 一出  # 顾名思义  # js  # 并对  # 还未  # 看我  # 才会  # 还没有  # 我是  # 的是  # 绑定  # 后绑定  # 前绑定  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!