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