(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,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。舉個列子 有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法 一是三個人在公司門口等快...