什麼是事件委託:
通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託的呢就是讓別人來做,這個時間本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。
原理:
利用冒泡的原理,把事件加到父級上,觸發執行效果。
優點:
1.提高效能。
例如:需要觸發每個li來改變他們的背景顏色。
<ul id
= "ul"
>
<
li>aaaa
li>
<
li>aaaa
li>
<
li>aaaa
li>
ul>
window.onload = function()//新增移出事件
ali[i].onmouseout
= function()
}}
這樣就可以做到li上面新增滑鼠事件。
但是如果說我們可能有很多個li用for迴圈的話就比較影響效能
下面我們可以用事件委託的方式來實現這樣的效果。(html不變)
/*利用事件委託實現
*/window.onload = function()
}oul.onmouseout = function(e)
}}
優點:
2.新新增的元素還會有之前的事件。
還拿這個例子來看,但是我們要做動態的新增li。點選button動態新增li
例如:
/*不使用事件委託點選button動態新增li,新新增的li沒有滑鼠移入事件。
*/window.onload = function ()
ali[i].onmouseout
= function
() }
obtn.onclick
= function
() }
這樣做新新增的li沒有滑鼠移入事件。
因為點選新增的時候for迴圈已經執行完畢
那麼我們就要用事件委託的方式來做
window.onload = function ()}oul.onmouseout = function (ev)
}obtn.onclick = function ()
}
js中的事件委託
1,什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。也就是 利用冒泡的原理,把事件加到父級上,觸發執行效果。好處呢 1,提高效能。我們可以看乙個...
js中的事件委託
1,什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。也就是 利用冒泡的原理,把事件加到父級上,觸發執行效果。好處呢 1,提高效能。我們可以看乙個...
js中的事件委託
1,什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。也就是 利用冒泡的原理,把事件加到父級上,觸發執行效果。好處呢 1,提高效能。我們可以看乙個...