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

这篇文章详细介绍了js中的前绑定和后绑定有需要的朋友可以参考一下

其主要意思就是看我有没有用过前绑定即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="/Scripts/jqueryjs" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//后绑定即动态创建的元素不能拥有绑定的事件！！！
//后绑定
// $("#main > a ")click(function () {
// alert($(this)html());
// });

//后绑定
// $("#main > a")bind("click" function () {
// alert($(this)text());
// });

//后绑定
// $("#main > a")bind({
// click: function () { alert($(this)text()); }
// mouseover: function () { $(this)css("backgroundcolor" "red") }
// mouseout: function () { $(this)css("backgroundcolor" "white") }
// });
$("#btnCreate")bind({
click: function () { $("<br /><a #>我是动态创建的</a>")appendTo("#main"); }
});

//前绑定动态创建的元素也拥有了点击的事件
// $("#main")delegate("a" "click" function () {
// alert($(this)text());
// });

//前绑定live的事件源头的是documentdelegate的源头是具体要绑定的元素所以delegate的效率比live高多了
$("#main a")live("click" function () {
alert($(this)text());
});
});
</script>