這篇文章將為大家詳細(xì)講解有關(guān)js中如何使用事件on動(dòng)態(tài)綁定數(shù)據(jù)以及綁定多個(gè)事件，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家業(yè)務(wù)范圍包括IDC托管業(yè)務(wù),虛擬空間、主機(jī)租用、主機(jī)托管，四川、重慶、廣東電信服務(wù)器租用,服務(wù)器托管，成都網(wǎng)通服務(wù)器托管,成都服務(wù)器租用,業(yè)務(wù)范圍遍及中國大陸、港澳臺(tái)以及歐美等多個(gè)國家及地區(qū)的互聯(lián)網(wǎng)數(shù)據(jù)服務(wù)公司。

一.on('clcik')與$('').clcik()方法的區(qū)別：

on('clcik')：事件委托機(jī)制

// 在body元素上綁定click事件處理函數(shù)handler，如果這個(gè)click事件是由其后代的P元素觸發(fā)的，就執(zhí)行handler
$(document.body).on("click", "p", handler);

事件委托機(jī)制就是，我們不為每個(gè)P元素直接綁定click事件處理函數(shù)，而是委托給其某個(gè)公共的祖輩元素(此處示例中為document.body)，"告訴"他：如果接收到了click事件觸發(fā)通知，并且這個(gè)click事件是由我們這些P元素其中之一觸發(fā)的，就執(zhí)行祖輩元素上委托綁定的事件處理函數(shù)。

注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托機(jī)制將無效。不過，他們一般也有對應(yīng)的支持冒泡的事件。例如與"focus"對應(yīng)的"focusin"，與"blur"對應(yīng)的"focusout"。此外，我們也可以使用event.stopPropagation()方法，讓當(dāng)前觸發(fā)的事件停止冒泡。

1.綁定多個(gè)事件，用空格隔開事件和命名空間如：“click”或“keydown.myPlugin”?；蛘吒袷綖?/strong>

on({

"clcik": function(){},

mouseover: function(){}

})

命名空間: namespace 名字{ 定義的數(shù)據(jù)； 定義的函數(shù)； 也可以是定義的類...}

2.可以給動(dòng)態(tài)元素和屬性綁定事件

clcik()不能為頁面動(dòng)態(tài)加載元素添加事件，事件只能為clcik

二：on()的參數(shù)

$().on(events,[seletor],[data],fn)或events-map,[seletor],[data]

events:一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間

events-map:個(gè)用字符串表示的，一個(gè)或多個(gè)空格分隔的事件類型和可選的命名空間，值表示事件綁定的處理函數(shù)。

seletor:一個(gè)選擇器字符串用于過濾器的觸發(fā)事件的選擇器元素的后代。如果選擇的< null或省略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。(也就是觸發(fā)事件元素)

data:當(dāng)一個(gè)事件被觸發(fā)時(shí)要傳遞event.data給事件處理函數(shù)。
fn:該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。如果事件處理函數(shù)handler僅僅只為返回false值，可以直接將handler設(shè)為false。false 值也可以做一個(gè)函數(shù)的簡寫，返回false。

如果要取消默認(rèn)事件直接加false

$("form").on("submit", false)

map:規(guī)定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一個(gè)或多個(gè)事件，以及當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)

三：onclick,click,on()的優(yōu)先關(guān)系：onclick>click>on()；

關(guān)于“js中如何使用事件on動(dòng)態(tài)綁定數(shù)據(jù)以及綁定多個(gè)事件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。