萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 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="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>

copyright © 萬盛學電腦網 all rights reserved