js中的前綁定和后綁定詳解
其主要意思就是看我有沒(méi)有用過(guò)前綁定，即Dom樹(shù)中的某些元素在還沒(méi)有創(chuàng)建出來(lái)時(shí)，就指定該類型的元素一出生就應(yīng)該擁有的某些事件。在實(shí)際開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)涉及到前綁定和后綁定。顧名思義，前綁定——還未出生即綁定了某些事件，后綁定——出生后才會(huì)綁定的某些事件。
下面，通過(guò)一個(gè)簡(jiǎn)單的例子進(jìn)行闡述，以供大家參考，并對(duì)各個(gè)方法進(jìn)行比較：
頁(yè)面元素：
<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:
<script src="201102/Scripts/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//后綁定，即動(dòng)態(tài)創(chuàng)建的元素不能擁有綁定的事件！?。?
//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='#'>我是動(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>
相關(guān)文章
JavaScript fontcolor方法入門實(shí)例（按照指定的顏色來(lái)顯示字符串）
這篇文章主要介紹了JavaScript fontcolor方法入門實(shí)例,fontcolor方法用于按照指定的顏色來(lái)顯示字符串,需要的朋友可以參考下2014-10-10
URI就是一種資源定位機(jī)制，它是比較籠統(tǒng)地定位了資源，并不局限于客戶端和服務(wù)器，而URL就定位了網(wǎng)上的一切資源，只要是網(wǎng)上的資源，都有唯一的URL2013-11-11
javascript創(chuàng)建對(duì)象的幾種模式介紹
下面小編就為大家?guī)?lái)一篇javascript創(chuàng)建對(duì)象的幾種模式介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
下面小編就為大家?guī)?lái)一篇關(guān)于js原型的面試題講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
這篇文章主要介紹了Javascript基礎(chǔ)教程之比較操作符,需要的朋友可以參考下2015-01-01
js 延遲加載 改變JS的位置加快網(wǎng)頁(yè)加載速度
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁(yè)的加載速度,為了提高加載速度，本文總結(jié)了一下幾個(gè)注意點(diǎn)2012-12-12
深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解
這篇文章主要介紹了深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解,本文講解了一般理論、按值傳遞、按引用傳遞、按共享傳遞（Call by sharing）、按共享傳遞是按值傳遞的特例等內(nèi)容,需要的朋友可以參考下2015-03-03
window.parent與window.openner區(qū)別介紹
今天總結(jié)一下js中幾個(gè)對(duì)象的區(qū)別和用法，對(duì)這幾個(gè)概念混淆的朋友可以看看2012-04-04
本篇文章對(duì)JavaScript中聲明全局變量的三種方式進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
本文續(xù)上文，繼續(xù)講述javascript的基礎(chǔ)，分為一下幾個(gè)部分：區(qū)分大小寫、標(biāo)示符、注釋、語(yǔ)句、關(guān)鍵字和保留字，希望能給大家一些新的認(rèn)識(shí)。2015-01-01