js和jquery中的事件委託

【轉+自己的修改】

概念：

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

舉個列子：有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委託給前台mm代為簽收。現實當中，我們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就為了等快遞）。前台mm收到快遞後，她會判斷收件人是誰，然後按照收件人的要求簽收，甚至代為付款。這種方案還有乙個優勢，那就是即使公司裡來了新員工（不管多少），前台mm也會在收到寄給新員工的快遞後核實並代為簽收。

原理：

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

作用：

1.效能要好

2.針對新建立的元素，直接可以擁有事件

事件源 :

跟this作用一樣(他不用看指向問題，誰操作的就是誰),event物件下的

使用情景：

•為dom中的很多元素繫結相同事件；

•為dom中尚不存在的元素繫結事件；

js的事件委託：

好處呢：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

如：

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

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

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

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

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

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

ok：如同在我們用微博中，新發微博照樣有之前的滑鼠事件。

jquery的事件委託

$(function
()else
}) });

最新on()方法取替了delegate()方法

$(function
()else
}) });

推薦開發使用最新版的jquery和使用最新版的方法

js和jquery中的事件委託

JS與Jquery的事件委託

原生JS及jQuery中事件委託的寫法

js中的事件委託

js和jquery中的事件委託

JS與Jquery的事件委託

原生JS及jQuery中事件委託的寫法

js中的事件委託

相關推薦