js中的事件委託

1，什麼是事件委託：通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。

也就是：利用冒泡的原理，把事件加到父級上，觸發執行效果。

好處呢：1，提高效能。

我們可以看乙個例子：需要觸發每個li來改變他們的背景顏色。

<

ul id
="ul"
>
<
li>aaaaaaaa
li>
<
li>bbbbbbbb
li>
<
li>cccccccc
li>
ul>

window.onload = function()

ali[i].onmouseout 
= function()
}}

這樣我們就可以做到li上面新增滑鼠事件。

但是如果說我們可能有很多個li用for迴圈的話就比較影響效能。

下面我們可以用事件委託的方式來實現這樣的效果。html不變

window.onload = function()

}  oul.onmouseout = function(ev)
}}

好處2，新新增的元素還會有之前的事件。

我們還拿這個例子看，但是我們要做動態的新增li。點選button動態新增li

如：

<

input 
type
="button"
id="btn"
/>
<
ul id
="ul"
>
<
li>aaaaaaaa
li>
<
li>bbbbbbbb
li>
<
li>cccccccc
li>
ul>

不用事件委託我們會這樣做：

window.onload = function()

ali[i].onmouseout 
= function()
}  obtn.onclick 
= function()
}

這樣做我們可以看到點選按鈕新加的li上面沒有滑鼠移入事件來改變他們的背景顏色。

因為點選新增的時候for迴圈已經執行完畢。

那麼我們用事件委託的方式來做。就是html不變

window.onload = function()

}  oul.onmouseout = function(ev)
}  obtn.onclick = function()
}

js中的事件委託

1，什麼是事件委託 通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。也就是 利用冒泡的原理，把事件加到父級上，觸發執行效果。好處呢 1，提高效能。我們可以看乙個...

js中的事件委託

1，什麼是事件委託 通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來做，這個事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。也就是 利用冒泡的原理，把事件加到父級上，觸發執行效果。好處呢 1，提高效能。我們可以看乙個...

JS中的事件委託

什麼是事件委託 通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託的呢就是讓別人來做，這個時間本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個事件。原理 利用冒泡的原理，把事件加到父級上，觸發執行效果。優點 1.提高效能。例如 需要觸發每個li...