定義（多種不同的定義）
- 通俗的講，事件委托就是把一個元素回應事件（click、keydown…）的函式委托到另一個元素上，
- 簡單的講，事件委托就是利用 JavaScript 事件冒泡的特性，將內層元素的事件委托（系結）給外層元素處理，
- 一般來講，事件委托會把一個或者一組元素的事件委托（系結）到它的父層元素或者更外層元素上，真正系結事件的是外層元素，當事件回應到需要系結的元素上時，會通過事件冒泡機制從而觸發它的外層元素的系結事件上，然后在外層元素上去執行函式，
1、普通寫法（不使用事件委托）
<ul>
<li>li 1 號</li>
<li>li 2 號</li>
<li>li 3 號</li>
<li>li 4 號</li>
</ul>
<button id="btn">添加</button>
// 通過標簽名獲取元素
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");
// 遍歷元素給每個元素添加點擊事件
for (let i = 0; i < oLi.length; i++) {
oLi[i].onclick = function() {
console.log(oLi[i].innerText);
};
};
// 通過 id 獲取 按鈕元素
let btn = document.getElementById("btn");
// 給按鈕添加點擊事件
btn.onclick = function() {
// 創建新的 li
let aLi = document.createElement("li");
// 給 li 賦值
aLi.innerHTML = `li ${oLi.length+1} 號`;
// 為新節點單獨添加事件
aLi.onclick = function() {
console.log(aLi.innerText);
};
// 把 li 展示到頁面上
oUl.appendChild(aLi);
};
總結
從上面的代碼可以看到，用 for 回圈給相應的 li 添加點擊事件，每添加一個就多一次 dom 操作，加上按鈕點擊總共 5 次，當添加新的 li 元素時，還要給新 li 元素添加點擊事件，這無疑有些繁瑣，而且 dom 操作的次數沒有做優化，顯然當頁面的 li 元素很多的時候，性能將會受到影響，
2、事件委托寫法
<ul>
<li>li 1 號</li>
<li>li 2 號</li>
<li>li 3 號</li>
<li>li 4 號</li>
</ul>
<button id="btn">添加</button>
// 通過標簽名獲取元素
let oUl = document.getElementsByTagName("ul")[0];
let oLi = document.getElementsByTagName("li");
// 直接給 ul 添加點擊事件
oUl.onclick = function(ev) {
// ev 物件的兼容處理
ev = ev || window.event;
// 通過 ev 物件的 target 找到觸發事件的元素
// 此操作的作用是：拿到對應的元素
let target = ev.target || ev.srcElement;
// 需求中的操作
// target.nodeName.toLowerCase() 獲取元素的操作
// 寫法一
if (target.nodeName.toLowerCase() == "li") {
console.log(target.innerText);
};
// 寫法二
console.log(target.innerText);
};
// 通過 id 獲取 按鈕元素
let btn = document.getElementById("btn");
// 為按鈕添加點擊事件
btn.onclick = function(ev) {
// 新建 li 元素
let aLi = document.createElement("li");
// 給 li 賦值
aLi.innerHTML = `li ${oLi.length+1} 號`;
// 直接將新 li 元素放到 ul 上
oUl.appendChild(aLi);
};
總結
將上面的代碼和普通寫法進行比對，顯然用事件委托的寫法更加的簡潔，不僅能減少代碼量，同時還能減少 dom 操作次數，實作對性能的優化，簡直一舉多得，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277687.html
標籤：其他
上一篇：CSS布局—溢位(清晰易懂)