摘要:事件委托方法能對(duì)一個(gè)還沒(méi)有添加進(jìn)的元素有效,是由于使用了事件委托綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。執(zhí)行由綁定的特殊的事件處理函數(shù)。這個(gè)事件處理函數(shù)首先檢測(cè)事件對(duì)象的來(lái)確定是不是需要繼續(xù)。
概述
jQuery給所有匹配的元素附加一個(gè)事件處理函數(shù),即使這個(gè)元素是以后再添加進(jìn)來(lái)的也有效。
這個(gè)方法是基本是的 .bind() 方法的一個(gè)變體。使用 .bind()時(shí),選擇器匹配的元素會(huì)附加一個(gè)事件處理函數(shù),而以后再添加的元素則不會(huì)有。為此需要再使用一次 .bind() 才行。比如說(shuō)
Click here
可以給這個(gè)元素綁定一個(gè)簡(jiǎn)單的click事件:
$(".clickme").bind("click", function() { alert("Bound handler called."); });
當(dāng)點(diǎn)擊了元素,就會(huì)彈出一個(gè)警告框。
然后,想象一下這之后有另一個(gè)元素添加進(jìn)來(lái)了。
$("body").append(" Another target ");
盡管這個(gè)新的元素也能夠匹配選擇器".clickme" ,但是由于這個(gè)元素是在調(diào)用 .bind() 之后添加的,所以點(diǎn)擊這個(gè)元素不會(huì)有任何效果。
.live()就提供了對(duì)應(yīng)這種情況的方法。如果我們是這樣綁定click事件的:
$(".clickme").live("click", function() { alert("Live handler called."); });
然后再添加一個(gè)新元素:
$("body").append("
Another target
");
然后再點(diǎn)擊新增的元素,他依然能夠觸發(fā)事件處理函數(shù)。
事件委托
.live()方法能對(duì)一個(gè)還沒(méi)有添加進(jìn)DOM的元素有效,是由于使用了事件委托:綁定在祖先元素上的事件處理函數(shù)可以對(duì)在后代上觸發(fā)的事件作出回應(yīng)。
傳遞給 .live()的事件處理函數(shù)不會(huì)綁定在元素上,而是把他作為一個(gè)特殊的事件處理函數(shù),綁定在 DOM樹(shù)的根節(jié)點(diǎn)上。在我們的例子中,當(dāng)點(diǎn)擊新的元素后,會(huì)依次發(fā)生下列步驟:
1、生成一個(gè)click事件傳遞給
附加說(shuō)明
.live()雖然很有用,但由于其特殊的實(shí)現(xiàn)方式,所以不能簡(jiǎn)單的在任何情況下替換 .bind()。主要的不同有:
在jQuery 1.4中,.live()方法支持自定義事件,也支持所有的JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue事件了(映射到更合適,并且可以冒泡的focusin和focusout上)。
另外,在jQuery1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery1.3.x中,只支持支持的JavaScript事件和自定義事件:click, dblclick, keydown, keypress,keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live()并不完全支持通過(guò)DOM遍歷的方法找到的元素。取而代之的是,應(yīng)當(dāng)總是在一個(gè)選擇器后面直接使用 .live()方法,正如前面例子里提到的。
當(dāng)一個(gè)事件處理函數(shù)用 .live()綁定后,要停止執(zhí)行其他的事件處理函數(shù),那么這個(gè)函數(shù)必須返回 false。 僅僅調(diào)用 .stopPropagation()無(wú)法實(shí)現(xiàn)這個(gè)目的。
參考 .bind() 方法可以獲得更多關(guān)于事件綁定的信息。
在jQuery 1.4.1中,你可以一次綁定多個(gè)事件給 .live() ,跟.bind() 提供的功能類似。
在jQuery 1.4中,data參數(shù)可以用于把附加信息傳遞給事件處理函數(shù)。一個(gè)很好的用處是應(yīng)付由閉包導(dǎo)致的問(wèn)題??梢詤⒖?.bind()的討論來(lái)獲得更多信息。
參數(shù)
typeString 事件類型
data(可選) Object 欲綁定的事件處理函數(shù)
fn Function 欲綁定的事件處理函數(shù)
示例
HTML 代碼:
Click me! jQuery 代碼: $("p").live("click", function(){ $(this).after(" Another paragraph! "); });
描述:
阻止默認(rèn)事件行為和事件冒泡,返回false
jQuery 代碼:
$("a").live("click", function() { returnfalse; });
描述:
僅僅阻止默認(rèn)事件行為
jQuery 代碼:
$("a").live("click", function(event){ event.preventDefault(); });
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/79057.html
摘要:而事件委托的概念事件目標(biāo)自身不處理事件,而是將其委托給父元素或祖先元素或根元素,而借助事件的冒泡性質(zhì)由內(nèi)向外來(lái)達(dá)到最終處理事件。而且一旦出現(xiàn),局部刷新導(dǎo)致重新綁定事件。函數(shù)的用法,代表要移除的事件,表示選擇的,表示事件處理函數(shù)。 歡迎來(lái)我的專欄查看系列文章。 這次的內(nèi)容是來(lái)介紹關(guān)于 jQuery 的事件委托。不過(guò)在之前呢有必要先來(lái)了解一下 JS 中的事件委托與冒泡,我之前也寫(xiě)過(guò)類似的博...
摘要:如何創(chuàng)建嵌套的過(guò)濾器允許你減少集合中的匹配元素的過(guò)濾器,只剩下那些與給定的選擇器匹配的部分。在這種情況下,查詢刪除了任何沒(méi)有包含為的子節(jié)點(diǎn)。 如何創(chuàng)建嵌套的過(guò)濾器 //允許你減少集合中的匹配元素的過(guò)濾器, //只剩下那些與給定的選擇器匹配的部分。在這種情況下, //查詢刪除了任何沒(méi)(:not)有(:has) //包含class為selected(.sel...
摘要:它是一個(gè)過(guò)濾器的作用,只有被選中元素的后代元素才會(huì)觸發(fā)事件。替換是引入的,目的是通過(guò)祖先元素來(lái)代理委派后代元素的事件綁定問(wèn)題,某種程度上和優(yōu)點(diǎn)相似。相關(guān)資料深入理解新的綁定事件機(jī)制方法的使用新的事件綁定機(jī)制 前言 在開(kāi)發(fā)項(xiàng)目的時(shí)候,JQuery的使用極其廣泛,如果腦海中沒(méi)有一點(diǎn)JQuery的基礎(chǔ)知識(shí),隨性編寫(xiě),那么就有可能造成bug問(wèn)題。JQuery 1.4版本之后新增了on方法,這個(gè)...
摘要:它是一個(gè)過(guò)濾器的作用,只有被選中元素的后代元素才會(huì)觸發(fā)事件。替換是引入的,目的是通過(guò)祖先元素來(lái)代理委派后代元素的事件綁定問(wèn)題,某種程度上和優(yōu)點(diǎn)相似。相關(guān)資料深入理解新的綁定事件機(jī)制方法的使用新的事件綁定機(jī)制 前言 在開(kāi)發(fā)項(xiàng)目的時(shí)候,JQuery的使用極其廣泛,如果腦海中沒(méi)有一點(diǎn)JQuery的基礎(chǔ)知識(shí),隨性編寫(xiě),那么就有可能造成bug問(wèn)題。JQuery 1.4版本之后新增了on方法,這個(gè)...
摘要:它是一個(gè)過(guò)濾器的作用,只有被選中元素的后代元素才會(huì)觸發(fā)事件。替換是引入的,目的是通過(guò)祖先元素來(lái)代理委派后代元素的事件綁定問(wèn)題,某種程度上和優(yōu)點(diǎn)相似。相關(guān)資料深入理解新的綁定事件機(jī)制方法的使用新的事件綁定機(jī)制 前言 在開(kāi)發(fā)項(xiàng)目的時(shí)候,JQuery的使用極其廣泛,如果腦海中沒(méi)有一點(diǎn)JQuery的基礎(chǔ)知識(shí),隨性編寫(xiě),那么就有可能造成bug問(wèn)題。JQuery 1.4版本之后新增了on方法,這個(gè)...
閱讀 1038·2021-11-15 18:11
閱讀 3162·2021-09-22 15:33
閱讀 3458·2021-09-01 11:42
閱讀 2654·2021-08-24 10:03
閱讀 3615·2021-07-29 13:50
閱讀 2925·2019-08-30 14:08
閱讀 1274·2019-08-28 17:56
閱讀 2259·2019-08-26 13:57