js中如何使用事件on動態(tài)綁定數(shù)據(jù)以及綁定多個事件

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

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

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

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

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

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

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

on({

"clcik": function(){},

mouseover: function(){}

})

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

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

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

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

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

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

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

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

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

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

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

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

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

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