快捷導(dǎo)航

js中的前綁定和后綁定詳解

更新時(shí)間：2013年08月01日 16:33:31 作者：

這篇文章詳細(xì)介紹了js中的前綁定和后綁定，有需要的朋友可以參考一下

其主要意思就是看我有沒有用過(guò)前綁定，即Dom樹中的某些元素在還沒有創(chuàng)建出來(lái)時(shí)，就指定該類型的元素一出生就應(yīng)該擁有的某些事件。在實(shí)際開發(fā)過(guò)程中經(jīng)常會(huì)涉及到前綁定和后綁定。顧名思義，前綁定——還未出生即綁定了某些事件，后綁定——出生后才會(huì)綁定的某些事件。
下面，通過(guò)一個(gè)簡(jiǎn)單的例子進(jìn)行闡述，以供大家參考，并對(duì)各個(gè)方法進(jìn)行比較：
頁(yè)面元素：

復(fù)制代碼代碼如下:

<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="創(chuàng)建a標(biāo)簽" id="btnCreate" />

頁(yè)面中的js:

復(fù)制代碼代碼如下:

//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='#'>我是動(dòng)態(tài)創(chuàng)建的</a>").appendTo("#main"); }
});

//4.前綁定，動(dòng)態(tài)創(chuàng)建的元素也擁有了點(diǎn)擊的事件
// $("#main").delegate("a", "click", function () {
// alert($(this).text());
// });

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