JS中的事件委託

2022-07-03 10:30:13 字數 1440 閱讀 8968

什麼是事件委託:

通俗的講,事件就是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,提高效能。我們可以看乙個...