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”?；蛘吒袷綖?/strong>
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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
表單驗(yàn)證在很多地方都可以用到，本文詳細(xì)的介紹了javascript表單是否為空驗(yàn)證方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了webpack自動(dòng)化打包的相關(guān)知識(shí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-02-02
javascript實(shí)現(xiàn)網(wǎng)頁(yè)子頁(yè)面遍歷回調(diào)的方法（涉及 window.frames、遞歸函數(shù)、函數(shù)上下文）
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)子頁(yè)面遍歷回調(diào)的方法（涉及 window.frames、遞歸函數(shù)、函數(shù)上下文）,涉及javascript回調(diào)、遍歷等實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-07-07
js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼
這篇文章主要介紹了js 計(jì)算圖片內(nèi)點(diǎn)個(gè)數(shù)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Google Map V3 綁定氣泡窗口(infowindow)Dom事件實(shí)現(xiàn)代碼
無(wú)法在infowindow里面添加的div進(jìn)行綁定事件處理，官方的API，發(fā)現(xiàn)了google.maps.InfoWindow下面的Events里面有個(gè)domready事件2013-04-04
JS運(yùn)算符優(yōu)先級(jí)與表達(dá)式示例詳解
這篇文章主要給大家介紹了關(guān)于JS運(yùn)算符優(yōu)先級(jí)與表達(dá)式的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
解決JS使用fill()進(jìn)行數(shù)組填充遇到的問(wèn)題
最近在做算法題時(shí),遇到需要?jiǎng)?chuàng)建二維數(shù)組并進(jìn)行初始化的情況,剛開(kāi)始我使用的是 new Array(n).fill(new Array(n).fill('.')) 進(jìn)行二維數(shù)組的初始化,但無(wú)論怎樣我都通不過(guò)測(cè)試用例,所以本文就給大家詳細(xì)的介紹了如何解決這類問(wèn)題以及將js中的fill（方法重學(xué)一下2023-09-09
javascript中導(dǎo)出與導(dǎo)入實(shí)現(xiàn)模塊化管理教程
這篇文章主要給大家介紹了關(guān)于javascript中導(dǎo)出與導(dǎo)入實(shí)現(xiàn)模塊化管理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
簡(jiǎn)單幾行JS Code實(shí)現(xiàn)IE郵件轉(zhuǎn)發(fā)新浪微博
大概就是說(shuō)我們可以用window.external.menuArguments這個(gè)對(duì)象獲取到內(nèi)部的信息，如window，document這些常用的對(duì)象2013-07-07
JavaScript實(shí)現(xiàn)無(wú)阻塞加載的常用方式
在 JavaScript 中,無(wú)阻塞加載（Non-blocking Loading）是優(yōu)化網(wǎng)頁(yè)性能的關(guān)鍵技術(shù),通過(guò)避免腳本阻塞頁(yè)面渲染和其他資源的加載,提升用戶體驗(yàn),以下是實(shí)現(xiàn)無(wú)阻塞加載的常用方法及示例,需要的朋友可以參考下2025-03-03