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>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20027.html