事件委託:將原本應該繫結在元素本身的事件繫結在他的父元素或者是祖先元素中,利用事件冒泡的原理。
例如1:在ul標籤下有1000個li,如果我們要為所有的li新增滑鼠 「移進移出」事件,一般我們會想到直接迴圈在li元素的本身新增事件,但是這樣會嚴重的影響頁面的顯示效能,在這個時候我們就可以用到js的事件委託,將事件委託在他們的父元素上:
一般解法:
doctype html你會發現當我們將滑鼠移入移出最新新增的li元素的時候,並沒有觸發onmouseout() 和 onmouseover()函式,這是因為在我們執行新新增元素的時候,for迴圈已經結束了,所以就未繫結相對應的事件>
<
html
>
<
span
style
="white-space:pre"
>
span
><
head
>
<
meta
charset
="utf-8"
>
<
title
>事件委託
title
>
<
style
type
="text/css"
>
ul #num li
#name
style
>
<
script
type
="text/j**ascript"
>
window.onload
=function
() oli[i].onmouseout
=function
() }
/*新增新節點
*/var
osub
=document.getelementbyid(
"sub
");
//提交
varoname
=document.getelementbyid(
"name
");
//節點資訊
osub.onclick
=function
() }
}script
>
head
>
<
body
>
<
ul id
="num"
>
<
li>1
li>
<
li>2
li>
<
li>3
li>
ul>
<
input
type
="text"
id="name"
placeholder
="請輸入節點內容"
/>
<
input
type
="submit"
id="sub"
/>
body
>
html
>
。事件委託解法:
doctype html但是在原來的html未改變的情況下,如果我們使用事件委託的方式來觸發事件的話,可以發現最新新增的li元素可以觸發onmouseout() 和 onmouseover()函式的事件>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>事件委託
title
>
<
style
type
="text/css"
>
ul #num li
#name
style
>
<
script
type
="text/j**ascript"
>
window.onload
=function
() ;
};oul.onmouseout
=function
(e)
}/*新增節點
*/var
osub
=document.getelementbyid(
"sub
");
//提交
varoname
=document.getelementbyid(
"name
");
//節點資訊
osub.onclick
=function
() }
}script
>
head
>
<
body
>
<
ul id
="num"
>
<
li>1
li>
<
li>2
li>
<
li>3
li>
ul>
<
input
type
="text"
id="name"
placeholder
="請輸入節點內容"
/>
<
input
type
="submit"
id="sub"
/>
body
>
html
>
。順道推薦一篇jquery的事件委託文章點選開啟鏈結
事件捕獲:當某個元素觸發某個事件(如onclick),頂層物件document就會發出乙個事件流,隨著dom樹的節點向目標元素節點流去,直到到達事件真正發生的目標元素。在這個過程中,事件相應的監聽函式是不會被觸發的。
事件目標:當到達目標元素之後,執行目標元素該事件相應的處理函式。如果沒有繫結監聽函式,那就不執行。
事件起泡:從目標元素開始,往頂層元素傳播。途中如果有節點繫結了相應的事件處理函式,這些函式都會被一次觸發。如果想阻止事件起泡,可以使用e.stoppropagation()(firefox)或者e.cancelbubble=true(ie)來組織事件的冒泡傳播。
js事件委託
乙個ul列表,裡邊有乙個1000個li元素,如何為這1000個li元素新增click事件?function false 參考文章 作為閉包使用的 function 已知ab兩個有序陣列,a陣列長度m,b陣列長度n,請最多迴圈m n次找出a,b陣列中相同的元素 對 事件處理程式過多 問題的解決方案就是...
js事件委託
事件委託 通俗的講把自己應該做的事情交給別人去做,也就是利用冒泡原理,把這個這個事件交給父級或祖先去觸發執行效果。用例項來說。需求是這樣的 滑鼠放到li上對應的li背景變灰。利用事件冒泡實現 ul on mouseover function e 也許有人會說,我們直接給所有li都綁上事件也可以啊,一...
js事件委託
在給多個標籤定義乙個事件的時候我們不會給每個dom都新增乙個事件浪費很多的資源,為此可以使用js的事件委託。在圖靈社群上給事件委託是這樣定義的 事件委託就是事件目標自身不處理事件,把事件委託給父元素或者祖先元素,甚至根元素。這裡註明文章出處 自己寫了乙個demo 給ul下的每個li新增乙個click...