jquery中on（）方法和live()方法的區(qū)別

一、作用不同

博羅網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,博羅網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為博羅上1000+提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設公司要多少錢，請找那個售后服務好的博羅做網(wǎng)站的公司定做！

1、on()：在被選元素及子元素上添加一個或多個事件處理程序。

2、live()：為被選元素附加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。

二、觸發(fā)條件不同

1、on()：使用 on() 方法添加的事件處理程序適用于當前及未來的元素（比如由腳本創(chuàng)建的新元素）。

2、live()：通過 live() 方法附加的事件處理程序適用于匹配選擇器的當前及未來的元素（比如由腳本創(chuàng)建的新元素）。

三、語法不同

1、on()：$(selector).on(event,childSelector,data,function)childSelector可選。規(guī)定只能添加到指定的子元素上的事件處理程序（且不是選擇器本身，比如已廢棄的 delegate() 方法）。

2、live()：$(selector).live(event,data,function)，其中event必需。規(guī)定附加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。

參考資料來源：百度百科-jQuery

jquery on是冒泡還是委托

可以通過以下三種方法做到不同程度的阻止。

A：return false ---In event handler ,prevents default behavior and

event bubbing 。

return false 在事件的處理中，可以阻止默認事件和冒泡事件。

B：event.preventDefault()--- In event handler ,prevent default

event (allows bubbling) 。

event.preventDefault()在事件的處理中，可以阻止默認事件但是允許冒泡事件的發(fā)生。

C：event.stopPropagation()--- In event handler ,prevent bubbling

(allows default behavior).。

event.stopPropagation()在事件的處理中，可以阻止冒泡但是允許默認事件的發(fā)生。

事件冒泡是什么如何用jquery阻止事件冒泡

（1）什么是事件起泡

首先你要明白一點，當一個事件發(fā)生的時候，該事件總是有一個事件源，即引發(fā)這個事件的對象，一個事件不能憑空產(chǎn)生，這就是事件的發(fā)生。

當事件發(fā)生后，這個事件就要開始傳播。為什么要傳播呢？因為事件源本身并沒有處理事件的能力。例如我們點擊一個按鈕時，就會產(chǎn)生一個click事件，但這個按鈕本身不能處理這個事件（廢話），事件必須從這個按鈕傳播出去，從而到達能夠處理這個事件的代碼中（例如我們給按鈕的onclick屬性賦一個函數(shù)的名字，就是讓這個函數(shù)去處理該按鈕的click事件）。

當事件在傳播過程中，找到了一個能夠處理它的函數(shù)，這時候我們就說這個函數(shù)捕捉到了這個事件。

說到這里，關鍵的問題來了，那就是一個函數(shù)是如何捕捉一個事件的呢？這就涉及到事件的冒泡了。

為了更好地理解冒泡的概念，我建議你現(xiàn)在想象一下你的面前放著一杯水，但這杯水和我們平時看到的有點點不同，它分為數(shù)層，每一層又分成一或多個區(qū)域，最頂層是我們熟悉的窗口對象（即window對象），下一層分為好幾個區(qū)域（document對象、history對象等等），而document對象的下一層又分為多個子對象。

這些對象的層次關系構成了DOM中的對象樹。

事件的傳播是有方向的，當點擊一個按鈕時所產(chǎn)生的事件從這個按鈕處開始向上傳播（就像一個水泡從杯底冒上來，這就是之所以叫事件冒泡的原因），但這個事件總是尋找特定的屬性是否有值。例如按鈕的click事件先尋找在按鈕上是否有onclick屬性的有意義的定義（即該屬性指向一個存在的函數(shù)或一段可執(zhí)行的語句），如果有，執(zhí)行這個函數(shù)或語句；然后事件繼續(xù)向上傳播，到達按鈕的上一層對象（例如一個form對象或document對象，總之是包含了按鈕的父對象），如果該對象也定義了onclick屬性，則執(zhí)行屬性的值。

所以，如果這個按鈕上面有3層（form、document、window），且這三層都定義了onclick屬性，則當按鈕的click事件產(chǎn)生時，將會調用4個（包括按鈕本身的一個）函數(shù)或執(zhí)行4段語句。

事件的這幾個特性在0級dom中也是適用的。

（2）jquery阻止事件起泡實例

1、通過返回false來取消默認的行為并阻止事件起泡。

jQuery 代碼:

復制代碼 代碼如下:

$("form").bind(

"submit",

function() {

return false;

}

);

2、通過使用 preventDefault() 方法只取消默認的行為。

jQuery 代碼:

復制代碼 代碼如下:

$("form").bind(

"submit",

function(event){

event.preventDefault();

}

);

3、通過使用 stopPropagation() 方法只阻止一個事件起泡。

jQuery 代碼:

復制代碼 代碼如下:

$("form").bind(

"submit",

function(event){

event.stopPropagation();

}

);

（3）關于js事件起泡的驗證

今天這個問題主要涉及到幾個關鍵詞：對象，觸發(fā)事件，捕獲事件，執(zhí)行處理、起泡。這其實就是整個js執(zhí)行的過程。其中冒泡這個過程很有意思。其實就像是一杯水，但是這杯水是分層次的，最底下是當前觸發(fā)事件的對象。然后越往上范圍越大，最頂層肯定是window，倒數(shù)第二層是document。氣泡在上浮過程中會判斷當前所到達的層有沒有綁定事件處理方法。有話就執(zhí)行相應的處理。沒有的話就繼續(xù)起泡。直到到達最頂層的window窗口層。我們可以在任何一層做相應的處理以阻止事件繼續(xù)起泡。方法就是調用事件對象的阻止起泡的方法。event.stopPropagation();下面是寫的一個驗證js事件起泡的過程方法。

復制代碼 代碼如下:

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）總結

1.一個事件起泡對應觸發(fā)的是上層的同一事件

特殊：如果two設置成雙擊事件，那么在你單擊two的時候就會起泡觸發(fā)one單擊的事件

（雙擊包含單擊）。

2.如果在click事件中，在你要處理的事件之前加上e.preventDefault();

那么就取消了行為（通俗理解：相當于做了個return操作），不執(zhí)行之后的語句了。

3.e.stopPropagation()只要在click事件中，就不會觸發(fā)上層click事件。

jquery怎么寫事件冒泡

事件冒泡不需要寫，瀏覽器就是這樣的機制，只是要學會利用

什么是JS事件冒泡？

在一個對象上觸發(fā)某類事件（比如單擊onclick事件），如果此對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

如何來阻止Jquery事件冒泡？

通過一個小例子來解釋

復制代碼代碼如下:

%@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('我是最里層！')"點擊我/a

/div

/div

/form

/body

/html

比如上面這個頁面，

分為三層：divOne是第外層，divTwo中間層，hr_three是最里層;

他們都有各自的click事件，最里層a標簽還有href屬性。

運行頁面，點擊“點擊我”,會依次彈出：我是最里層----我是中間層----我是最外層----然后再鏈接到百度.

這就是事件冒泡，本來我只點擊ID為hr_three的標簽，但是確執(zhí)行了三個alert操作。

事件冒泡過程（以標簽ID表示）：hr_three----divTwo----divOne。從最里層冒泡到最外層。

如何來阻止?

1.event.stopPropagation();

復制代碼代碼如下:

scripttype="text/javascript"

$(function(){

$("#hr_three").click(function(event){

event.stopPropagation();

});

});

script

再點擊“點擊我”，會彈出：我是最里層，然后鏈接到百度

2.returnfalse;

如果頭部加入的是以下代碼

復制代碼代碼如下:

scripttype="text/javascript"

$(function(){

$("#hr_three").click(function(event){

returnfalse;

});

});

script

再點擊“點擊我”，會彈出：我是最里層，但不會執(zhí)行鏈接到百度頁面

由此可以看出：

1.event.stopPropagation();

事件處理過程中，阻止了事件冒泡，但不會阻擊默認行為（它就執(zhí)行了超鏈接的跳轉）

2.returnfalse;

事件處理過程中，阻止了事件冒泡，也阻止了默認行為（比如剛才它就沒有執(zhí)行超鏈接的跳轉）

還有一種有冒泡有關的：

3.event.preventDefault();

如果把它放在頭部A標簽的click事件中，點擊“點擊我”。

會發(fā)現(xiàn)它依次彈出：我是最里層----我是中間層----我是最外層，但最后卻沒有跳轉到百度

它的作用是：事件處理過程中，不阻擊事件冒泡，但阻擊默認行為（它只執(zhí)行所有彈框，卻沒有執(zhí)行超鏈接跳轉）

jQuery事件冒泡及解決辦法

什么是事件冒泡：在一個對象上觸發(fā)某類事件（比如onclick事件），如果次對象定義了此事件的處理程序，那么此事件就會調用這個處理程序，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播，從里到外，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。

事件冒泡的作用：事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件。

阻止事件冒泡：事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止

$(function(){

})

代合并阻止操作：實際開發(fā)中，一般把阻止冒泡和阻止默認行為合并起來寫，合并寫法可以用.

// event.stopPropagation();

// event.preventDefault();

// 合并寫法：

return false;

事件委托就是利用冒泡的原理，把事件加到父級上，通過判斷事件來源的子集，執(zhí)行相應的操作，事件委托首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

一般綁定事件的寫法：bind

事件委托的寫法：

如果我們要取消事件的委托：

//ev.delegateTarge 委托的對象

$(ev.delegateTarge).undelegatee();

//如果是上面的兩種例子可使用//$list.undelegate();

創(chuàng)建節(jié)點： ('div')

var ('div這是一個div元素/div');

插入節(jié)點:

1、append()和appendTo()：在現(xiàn)存元素的內部，從后面插入元素

2、prepend()和prependTo()：在現(xiàn)存元素的內部，從前面插入元素

3、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素

4、before()和insertBefore()：在現(xiàn)存元素的外部，從前面插入元素

刪除節(jié)點

$('#div1').remove();

文章名稱：jqueryon冒泡,jq阻止事件冒泡的方法
文章起源：http://chinadenli.net/article7/dsihooj.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、網(wǎng)站設計、標簽優(yōu)化、品牌網(wǎng)站建設、做網(wǎng)站、關鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)