js事件委託

事件委託：將原本應該繫結在元素本身的事件繫結在他的父元素或者是祖先元素中，利用事件冒泡的原理。

例如1：在ul標籤下有1000個li，如果我們要為所有的li新增滑鼠「移進移出」事件，一般我們會想到直接迴圈在li元素的本身新增事件，但是這樣會嚴重的影響頁面的顯示效能，在這個時候我們就可以用到js的事件委託，將事件委託在他們的父元素上：

一般解法：

doctype html
>
<
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
>

你會發現當我們將滑鼠移入移出最新新增的li元素的時候，並沒有觸發onmouseout() 和 onmouseover()函式，這是因為在我們執行新新增元素的時候，for迴圈已經結束了，所以就未繫結相對應的事件

。事件委託解法：

doctype html
>
<
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
>

但是在原來的html未改變的情況下，如果我們使用事件委託的方式來觸發事件的話，可以發現最新新增的li元素可以觸發onmouseout() 和 onmouseover()函式的事件

。順道推薦一篇jquery的事件委託文章點選開啟鏈結

事件捕獲：當某個元素觸發某個事件（如onclick），頂層物件document就會發出乙個事件流，隨著dom樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素。在這個過程中，事件相應的監聽函式是不會被觸發的。

事件目標：當到達目標元素之後，執行目標元素該事件相應的處理函式。如果沒有繫結監聽函式，那就不執行。

事件起泡：從目標元素開始，往頂層元素傳播。途中如果有節點繫結了相應的事件處理函式，這些函式都會被一次觸發。如果想阻止事件起泡，可以使用e.stoppropagation()（firefox）或者e.cancelbubble=true（ie）來組織事件的冒泡傳播。

js事件委託

js事件委託

js事件委託

js事件委託

相關推薦