概念:
什麼是事件委託:通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。
舉個列子:有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快遞;二是委託給前台mm代為簽收。現實當中,我們大都採用委託的方案(公司也不會容忍那麼多員工站在門口就為了等快遞)。前台mm收到快遞後,她會判斷收件人是誰,然後按照收件人的要求簽收,甚至代為付款。這種方案還有乙個優勢,那就是即使公司裡來了新員工(不管多少),前台mm也會在收到寄給新員工的快遞後核實並代為簽收。
原理:
利用冒泡的原理,把事件加到父級上,觸發執行效果。
作用:
1.效能要好
2.針對新建立的元素,直接可以擁有事件
事件源 :
跟this作用一樣(他不用看指向問題,誰操作的就是誰),event物件下的
使用情景:
•為dom中的很多元素繫結相同事件;
•為dom中尚不存在的元素繫結事件;
js的事件委託
我們可以看乙個例子:需要觸發每個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
()}
ok:如同在我們用微博中,新發微博照樣有之前的滑鼠事件。
js中的事件委託
1,什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。也就是 利用冒泡的原理,把事件加到父級上,觸發執行效果。好處呢 1,提高效能。我們可以看乙個...
js中的事件委託
1,什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。也就是 利用冒泡的原理,把事件加到父級上,觸發執行效果。好處呢 1,提高效能。我們可以看乙個...
js中的事件委託
1,什麼是事件委託 通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委託呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。也就是 利用冒泡的原理,把事件加到父級上,觸發執行效果。好處呢 1,提高效能。我們可以看乙個...