JQuery的事件委託方法

2021-09-25 15:19:25 字數 1773 閱讀 3356

(1).什麼是事件委託?

子元素的事件委託給父元素,而不是分給子元素自己去繫結事件,然後觸發事件的時候找到對應的event.target	

是指利用事件冒泡,只指定乙個事件處理程式,來管理某一型別的所有事件

(2).為什麼要用事件委託?

因為在js中新增到頁面的事件處理程式個數會影響到頁面的整體執行效能

其次對列表逐個新增事件處理程式太過於麻煩,所以,事件委託極大地提高了頁面執行的效能

通過for迴圈給ul底下的li遍歷繫結事件,看似沒有問題但實際非常影響頁面的執行效能

此時,就用到冒泡模式的事件委託來解決

然而,有會想到繫結給ul的事件,實現後豈不是每個li都會受影響嗎?

出此案了新概念:事件源:不管事件繫結在那個元素中,都指的是實際觸發事件的內個目標

event.target

eg:ul.onclick=function(event){}

簡單點就是 減少dom訪問,減少記憶體,提高頁面的執行效能

1.blind

定義和用法:主要用於給選擇到的元素進行事件繫結

語法:blind("事件型別",data,function());

//data是傳入函式的引數用event.data獲取(平時用的.click()等都是其簡化用法)

特點;適用於靜態頁面,只能給呼叫它時已存在的元素繫結,不能給未來新增的元素繫結

當頁面載入完時,才進行blind;

2.live(1.7以後不支援)

定義:向當前或未來的匹配元素新增乙個或多個事件處理器;

語法:live("事件型別",data, 函式名);//data可選

特點:live並沒有將事件繫結到自身(this)上,而是繫結到this.context上

正是利用了事件委託機制完成事件的監聽處理,把節點的處理委託給 document

新新增的元素不必再繫結一次***,可多事件處理

只能放在直接選擇的元素的後面

3.delegate

定義:將監聽事件繫結到就近父級元素,因為事件可以更快的冒泡上去

語法:delegate(selector,type,[data],fn)

特點;更精確的小範圍使用事件**,效能優於.live()。可以用在動態新增的元素上。

eg:("父

級選擇器

′).d

eleg

ate(

".a"

,"cl

ick"

,fun

ctio

n())

//表示

:.a的

事件通過

父級元素

進行委託

,("父級選擇器').delegate(".a","click",function(){}) //表示:.a的事件通過父級元素進行委託,

("父級選擇

器′).

dele

gate

(".a

","c

lick

",fu

ncti

on()

)//表

示:.a

的事件通

過父級元

素進行委

託,(this)獲取的是觸發事件的子元素

4.on

定義;將監聽事件繫結到就近父級元素

語法:on(type, 選擇器,方法)

特點:給父元素底下新新增的標籤也可以用監聽事件

也支援多時事件處理

jQuery 事件委託

本文 隨著dom結構的複雜化和ajax等動態指令碼技術的運用,事件委託自然浮出了水面 jquery為繫結和委託事件提供了.bind live 和.delegate 方法。本文在討論這幾個方法內部實現的基礎上,展示它們的優劣勢及適用場合。事件委託 事件委託的事例在現實當中比比皆是。比如,有三個同事預計...

jQuery 事件委託

概念 什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。舉個列子 有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法 一是三個人在公司門口等快...

jquery事件委託

概念 什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。舉個列子 有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法 一是三個人在公司門口等快...