js中如何使用事件on動態綁定數據以及綁定多個事件

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

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

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

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

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

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

1.綁定多個事件，用空格隔開事件和命名空間如：“click”或“keydown.myPlugin”。或者格式為

on({

"clcik": function(){},

mouseover: function(){}

})

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

2.可以給動態元素和屬性綁定事件

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

二：on()的參數

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

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

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

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

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

如果要取消默認事件直接加false

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

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

三：onclick,click,on()的優先關系：onclick>click>on()；

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