JS中事件委託
阿新 • • 發佈：2021-06-30
概述：
事件委託，還有一個名字叫事件代理。為方便理解舉個例子：
有三個同事預計會在週一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委託給前臺MM代為簽收。現實當中，我們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就為了等快遞）。前臺MM收到快遞後，她會判斷收件人是誰，然後按照收件人的要求籤收，甚至代為付款。這種方案還有一個優勢，那就是即使公司裡來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞後核實並代為簽收。
用法：
傳統點選事件實現方式：
<body>
<ul id="test">
<li>1</li>
<li>3</li>
<li>5</li>
</ul>
<script>
var
View Code
缺點：不斷的與dom節點進行互動，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的互動就緒時間，新增到頁面上的事件處理程式數量將直接關係到頁面的整體執行效能，這就是為什麼效能優化的主要思想之一就是減少DOM操作的原因。
事件委託實現方式：
<body>
<ul id="test">
<li>1</li>
<li>3</li>
<li>5</li>
</ul>
<script>
window.onload = function () {
var oUl = document.getElementById("test");
oUl.onclick = function
View Code