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="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>