建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
jquery中on（）方法和live()方法的區(qū)別
一、作用不同
博羅網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,博羅網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為博羅上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的博羅做網(wǎng)站的公司定做！
1、on()：在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。
2、live()：為被選元素附加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。
二、觸發(fā)條件不同
1、on()：使用 on() 方法添加的事件處理程序適用于當(dāng)前及未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。
2、live()：通過(guò) live() 方法附加的事件處理程序適用于匹配選擇器的當(dāng)前及未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。
三、語(yǔ)法不同
1、on()：$(selector).on(event,childSelector,data,function)childSelector可選。規(guī)定只能添加到指定的子元素上的事件處理程序（且不是選擇器本身，比如已廢棄的 delegate() 方法）。
2、live()：$(selector).live(event,data,function)，其中event必需。規(guī)定附加到元素的一個(gè)或多個(gè)事件。由空格分隔多個(gè)事件。必須是有效的事件。
參考資料來(lái)源：百度百科-jQuery
jquery on是冒泡還是委托
可以通過(guò)以下三種方法做到不同程度的阻止。
A：return false ---In event handler ,prevents default behavior and
event bubbing 。
return false 在事件的處理中，可以阻止默認(rèn)事件和冒泡事件。
B：event.preventDefault()--- In event handler ,prevent default
event (allows bubbling) 。
event.preventDefault()在事件的處理中，可以阻止默認(rèn)事件但是允許冒泡事件的發(fā)生。
C：event.stopPropagation()--- In event handler ,prevent bubbling
(allows default behavior).。
event.stopPropagation()在事件的處理中，可以阻止冒泡但是允許默認(rèn)事件的發(fā)生。
事件冒泡是什么如何用jquery阻止事件冒泡
（1）什么是事件起泡
首先你要明白一點(diǎn)，當(dāng)一個(gè)事件發(fā)生的時(shí)候，該事件總是有一個(gè)事件源，即引發(fā)這個(gè)事件的對(duì)象，一個(gè)事件不能憑空產(chǎn)生，這就是事件的發(fā)生。
當(dāng)事件發(fā)生后，這個(gè)事件就要開(kāi)始傳播。為什么要傳播呢？因?yàn)槭录幢旧聿](méi)有處理事件的能力。例如我們點(diǎn)擊一個(gè)按鈕時(shí)，就會(huì)產(chǎn)生一個(gè)click事件，但這個(gè)按鈕本身不能處理這個(gè)事件（廢話(huà)），事件必須從這個(gè)按鈕傳播出去，從而到達(dá)能夠處理這個(gè)事件的代碼中（例如我們給按鈕的onclick屬性賦一個(gè)函數(shù)的名字，就是讓這個(gè)函數(shù)去處理該按鈕的click事件）。
當(dāng)事件在傳播過(guò)程中，找到了一個(gè)能夠處理它的函數(shù)，這時(shí)候我們就說(shuō)這個(gè)函數(shù)捕捉到了這個(gè)事件。
說(shuō)到這里，關(guān)鍵的問(wèn)題來(lái)了，那就是一個(gè)函數(shù)是如何捕捉一個(gè)事件的呢？這就涉及到事件的冒泡了。
為了更好地理解冒泡的概念，我建議你現(xiàn)在想象一下你的面前放著一杯水，但這杯水和我們平時(shí)看到的有點(diǎn)點(diǎn)不同，它分為數(shù)層，每一層又分成一或多個(gè)區(qū)域，最頂層是我們熟悉的窗口對(duì)象（即window對(duì)象），下一層分為好幾個(gè)區(qū)域（document對(duì)象、history對(duì)象等等），而document對(duì)象的下一層又分為多個(gè)子對(duì)象。
這些對(duì)象的層次關(guān)系構(gòu)成了DOM中的對(duì)象樹(shù)。
事件的傳播是有方向的，當(dāng)點(diǎn)擊一個(gè)按鈕時(shí)所產(chǎn)生的事件從這個(gè)按鈕處開(kāi)始向上傳播（就像一個(gè)水泡從杯底冒上來(lái)，這就是之所以叫事件冒泡的原因），但這個(gè)事件總是尋找特定的屬性是否有值。例如按鈕的click事件先尋找在按鈕上是否有onclick屬性的有意義的定義（即該屬性指向一個(gè)存在的函數(shù)或一段可執(zhí)行的語(yǔ)句），如果有，執(zhí)行這個(gè)函數(shù)或語(yǔ)句；然后事件繼續(xù)向上傳播，到達(dá)按鈕的上一層對(duì)象（例如一個(gè)form對(duì)象或document對(duì)象，總之是包含了按鈕的父對(duì)象），如果該對(duì)象也定義了onclick屬性，則執(zhí)行屬性的值。
所以，如果這個(gè)按鈕上面有3層（form、document、window），且這三層都定義了onclick屬性，則當(dāng)按鈕的click事件產(chǎn)生時(shí)，將會(huì)調(diào)用4個(gè)（包括按鈕本身的一個(gè)）函數(shù)或執(zhí)行4段語(yǔ)句。
事件的這幾個(gè)特性在0級(jí)dom中也是適用的。
（2）jquery阻止事件起泡實(shí)例
1、通過(guò)返回false來(lái)取消默認(rèn)的行為并阻止事件起泡。
jQuery 代碼:
復(fù)制代碼 代碼如下:
$("form").bind(
"submit",
function() {
return false;
}
);
2、通過(guò)使用 preventDefault() 方法只取消默認(rèn)的行為。
jQuery 代碼:
復(fù)制代碼 代碼如下:
$("form").bind(
"submit",
function(event){
event.preventDefault();
}
);
3、通過(guò)使用 stopPropagation() 方法只阻止一個(gè)事件起泡。
jQuery 代碼:
復(fù)制代碼 代碼如下:
$("form").bind(
"submit",
function(event){
event.stopPropagation();
}
);
（3）關(guān)于js事件起泡的驗(yàn)證
今天這個(gè)問(wèn)題主要涉及到幾個(gè)關(guān)鍵詞：對(duì)象，觸發(fā)事件，捕獲事件，執(zhí)行處理、起泡。這其實(shí)就是整個(gè)js執(zhí)行的過(guò)程。其中冒泡這個(gè)過(guò)程很有意思。其實(shí)就像是一杯水，但是這杯水是分層次的，最底下是當(dāng)前觸發(fā)事件的對(duì)象。然后越往上范圍越大，最頂層肯定是window，倒數(shù)第二層是document。氣泡在上浮過(guò)程中會(huì)判斷當(dāng)前所到達(dá)的層有沒(méi)有綁定事件處理方法。有話(huà)就執(zhí)行相應(yīng)的處理。沒(méi)有的話(huà)就繼續(xù)起泡。直到到達(dá)最頂層的window窗口層。我們可以在任何一層做相應(yīng)的處理以阻止事件繼續(xù)起泡。方法就是調(diào)用事件對(duì)象的阻止起泡的方法。event.stopPropagation();下面是寫(xiě)的一個(gè)驗(yàn)證js事件起泡的過(guò)程方法。
復(fù)制代碼 代碼如下:
script type="text/javascript"
$(document).ready(function(){
$('.one').click(function(e){
alert('one');
});
$('.two').click(function(e){
alert('two');
});
$('.three').click(function(e){
alert('three');
//阻止起泡取消下面的注釋
// e.stopPropagation();
});
});
/script
div class="one" style="width:200px;height:200px;background:green;"
one
div class="two" style="width:150px;height:150px;background:yellow;"
two
div class="three"
three
/div
/div
/div
（4）總結(jié)
1.一個(gè)事件起泡對(duì)應(yīng)觸發(fā)的是上層的同一事件
特殊：如果two設(shè)置成雙擊事件，那么在你單擊two的時(shí)候就會(huì)起泡觸發(fā)one單擊的事件
（雙擊包含單擊）。
2.如果在click事件中，在你要處理的事件之前加上e.preventDefault();
那么就取消了行為（通俗理解：相當(dāng)于做了個(gè)return操作），不執(zhí)行之后的語(yǔ)句了。
3.e.stopPropagation()只要在click事件中，就不會(huì)觸發(fā)上層click事件。
jquery怎么寫(xiě)事件冒泡
事件冒泡不需要寫(xiě)，瀏覽器就是這樣的機(jī)制，只是要學(xué)會(huì)利用
什么是JS事件冒泡？
在一個(gè)對(duì)象上觸發(fā)某類(lèi)事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類(lèi)事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。
如何來(lái)阻止Jquery事件冒泡？
通過(guò)一個(gè)小例子來(lái)解釋
復(fù)制代碼代碼如下:
%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default5.aspx.cs"Inherits="Default5"%
!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""
htmlxmlns=""
headrunat="server"
titlePorschev---Jquery事件冒泡/title
scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"/script
/head
body
formid="form1"runat="server"
divid="divOne"onclick="alert('我是最外層');"
divid="divTwo"onclick="alert('我是中間層！')"
aid="hr_three"href=""mce_href=""onclick="alert('我是最里層！')"點(diǎn)擊我/a
/div
/div
/form
/body
/html
比如上面這個(gè)頁(yè)面，
分為三層：divOne是第外層，divTwo中間層，hr_three是最里層;
他們都有各自的click事件，最里層a標(biāo)簽還有href屬性。
運(yùn)行頁(yè)面，點(diǎn)擊“點(diǎn)擊我”,會(huì)依次彈出：我是最里層----我是中間層----我是最外層----然后再鏈接到百度.
這就是事件冒泡，本來(lái)我只點(diǎn)擊ID為hr_three的標(biāo)簽，但是確執(zhí)行了三個(gè)alert操作。
事件冒泡過(guò)程（以標(biāo)簽ID表示）：hr_three----divTwo----divOne。從最里層冒泡到最外層。
如何來(lái)阻止?
1.event.stopPropagation();
復(fù)制代碼代碼如下:
scripttype="text/javascript"
$(function(){
$("#hr_three").click(function(event){
event.stopPropagation();
});
});
script
再點(diǎn)擊“點(diǎn)擊我”，會(huì)彈出：我是最里層，然后鏈接到百度
2.returnfalse;
如果頭部加入的是以下代碼
復(fù)制代碼代碼如下:
scripttype="text/javascript"
$(function(){
$("#hr_three").click(function(event){
returnfalse;
});
});
script
再點(diǎn)擊“點(diǎn)擊我”，會(huì)彈出：我是最里層，但不會(huì)執(zhí)行鏈接到百度頁(yè)面
由此可以看出：
1.event.stopPropagation();
事件處理過(guò)程中，阻止了事件冒泡，但不會(huì)阻擊默認(rèn)行為（它就執(zhí)行了超鏈接的跳轉(zhuǎn)）
2.returnfalse;
事件處理過(guò)程中，阻止了事件冒泡，也阻止了默認(rèn)行為（比如剛才它就沒(méi)有執(zhí)行超鏈接的跳轉(zhuǎn)）
還有一種有冒泡有關(guān)的：
3.event.preventDefault();
如果把它放在頭部A標(biāo)簽的click事件中，點(diǎn)擊“點(diǎn)擊我”。
會(huì)發(fā)現(xiàn)它依次彈出：我是最里層----我是中間層----我是最外層，但最后卻沒(méi)有跳轉(zhuǎn)到百度
它的作用是：事件處理過(guò)程中，不阻擊事件冒泡，但阻擊默認(rèn)行為（它只執(zhí)行所有彈框，卻沒(méi)有執(zhí)行超鏈接跳轉(zhuǎn)）
jQuery事件冒泡及解決辦法
什么是事件冒泡：在一個(gè)對(duì)象上觸發(fā)某類(lèi)事件（比如onclick事件），如果次對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，直至它被處理（父級(jí)對(duì)象所有同類(lèi)事件都將被激活），或者它到達(dá)了對(duì)象層次的最頂層，即document對(duì)象（有些瀏覽器是window）。
事件冒泡的作用：事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上，避免把事件處理器添加到多個(gè)子級(jí)元素上），它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。
阻止事件冒泡：事件冒泡機(jī)制有時(shí)候是不需要的，需要阻止掉，通過(guò) event.stopPropagation() 來(lái)阻止
$(function(){
})
代合并阻止操作：實(shí)際開(kāi)發(fā)中，一般把阻止冒泡和阻止默認(rèn)行為合并起來(lái)寫(xiě)，合并寫(xiě)法可以用.
// event.stopPropagation();
// event.preventDefault();
// 合并寫(xiě)法：
return false;
事件委托就是利用冒泡的原理，把事件加到父級(jí)上，通過(guò)判斷事件來(lái)源的子集，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。
一般綁定事件的寫(xiě)法：bind
事件委托的寫(xiě)法：
如果我們要取消事件的委托：
//ev.delegateTarge 委托的對(duì)象
$(ev.delegateTarge).undelegatee();
//如果是上面的兩種例子可使用//$list.undelegate();
創(chuàng)建節(jié)點(diǎn)： ('div')
var ('div這是一個(gè)div元素/div');
插入節(jié)點(diǎn):
1、append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素
2、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素
3、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素
4、before()和insertBefore()：在現(xiàn)存元素的外部，從前面插入元素
刪除節(jié)點(diǎn)
$('#div1').remove();
名稱(chēng)欄目：jqueryon冒泡,jq阻止事件冒泡的方法
分享網(wǎng)址：http://www.dlmjj.cn/article/dsihooj.html
