jQuery動態(tài)綁定元素事件

在綁定事件中淆衷,目前有on(), bind(), delegate(), live()四種綁定方式,有些方式只能對已知元素進行綁定缸榄,對于未知動態(tài)的元素獲取就沒有辦法。

bind()方式綁定

? ? bind()的事件綁定是只對當(dāng)前頁面選中的元素有效祝拯。如果你想對動態(tài)創(chuàng)建的元素bind()事件甚带,是沒有辦法達到效果的。

on()事件綁定

① 使用on進行單事件綁定

$("button").on("click",function(){

$(this) 取到當(dāng)前調(diào)用事件函數(shù)的對象

console.log($(this).html());

});

?② 使用on同時為多個事件佳头,綁定同一函數(shù)

$("button").on("mouseover click",function(){

console.log($(this).html())

})鹰贵;

③ 調(diào)用函數(shù)時,傳入自定義參數(shù) ??????這個用法可以動態(tài)的為html還未加載出來的數(shù)據(jù)進行事件綁定

$("button").on("click",{name:"liuJian"},function(event){

使用event.data.屬性名 找到傳入的參數(shù)

console.log(event.data.name);

})

④ 使用on進行多事件多函數(shù)綁定??????

$("button").on({

click:function(){

console.log("click")

},

mouseover:function(){

console.log("mouseOver")

}

});

⑤ 使用on進行事件委派??????????常用的動態(tài)綁定事件

? 將原本需要綁定到某元素上的事件康嘉,改為綁定在父元素乃至根節(jié)點上碉输,然后委派給當(dāng)前元素生效;

eg:$("p").click(function(){});

?$(document).on("click","p",function(){});

// document是指在全頁面的根結(jié)點上做操作亭珍,這樣一來頁面不管怎么樣子節(jié)點選擇都不會綁定失敗

// 默認的綁定方式敷钾,只能綁定到頁面初始時已有的p元素,當(dāng)頁面新增p元素時肄梨,無法綁定到新元素上

// 使用事件委派方式阻荒,當(dāng)頁面新增元素時,可以為所有新元素綁定事件


附文:

off() 取消事件綁定

1. $("p").off(): 取消所有事件

2. $("p").off("click"): 取消點擊事件

3. $("p").off("click mouseover"):取消多個事件

4. $(document).off("click","p"):取消事件委派

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末峭范,一起剝皮案震驚了整個濱河市财松,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌纱控,老刑警劉巖辆毡,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異甜害,居然都是意外死亡舶掖,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門尔店,熙熙樓的掌柜王于貴愁眉苦臉地迎上來眨攘,“玉大人,你說我怎么就攤上這事嚣州■晔郏” “怎么了?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵该肴,是天一觀的道長情竹。 經(jīng)常有香客問我,道長匀哄,這世上最難降的妖魔是什么秦效? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任雏蛮,我火速辦了婚禮,結(jié)果婚禮上阱州,老公的妹妹穿的比我還像新娘挑秉。我一直安慰自己,他們只是感情好苔货,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布犀概。 她就那樣靜靜地躺著,像睡著了一般蒲赂。 火紅的嫁衣襯著肌膚如雪阱冶。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天滥嘴,我揣著相機與錄音木蹬,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的渴邦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼晦譬,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了互广?” 一聲冷哼從身側(cè)響起敛腌,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎惫皱,沒想到半個月后像樊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡旅敷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年生棍,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片媳谁。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡涂滴,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出晴音,到底是詐尸還是另有隱情柔纵,我是刑警寧澤,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布锤躁,位于F島的核電站首量,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜加缘,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望觉啊。 院中可真熱鬧拣宏,春花似錦、人聲如沸杠人。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嗡善。三九已至辑莫,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間罩引,已是汗流浹背各吨。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留袁铐,地道東北人揭蜒。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像剔桨,于是被迫代替她去往敵國和親屉更。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容