js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法

一.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ī)制將無(wú)效。不過(guò)，他們一般也有對(duì)應(yīng)的支持冒泡的事件。例如與"focus"對(duì)應(yīng)的"focusin"，與"blur"對(duì)應(yīng)的"focusout"。此外，我們也可以使用event.stopPropagation()方法，讓當(dāng)前觸發(fā)的事件停止冒泡。

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

on({

"clcik": function(){},

mouseover: function(){}

})

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

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

clcik()不能為頁(yè)面動(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è)選擇器字符串用于過(guò)濾器的觸發(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ù)的簡(jiǎn)寫(xiě)，返回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()；

以上這篇js事件on動(dòng)態(tài)綁定數(shù)據(jù),綁定多個(gè)事件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com