事件代理:把一个元素响应事件的函数委托到另一个元素上,也叫事件委托;
事件流的三个阶段:1、捕获阶段----->2、目标阶段----->3、冒泡阶段;
事件代理(事件委托)主要就是利用了冒泡
的特点;
好处: 提高性能,减少事件绑定,从而减少内存占用
应用场景一:
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
/* const liArr = document.querySelectorAll("li");
//每一个都添加了一个点击事件,消耗内存
liArr.forEach((item) => {
item.addEventListener("click", (e) => {
console.log(e.target.innerHTML);
})
})*/
//使用事件委托,只操作一次DOM,从而提高了程序的性能
const ul = document.querySelector("#list");
ul.addEventListener("click", (e) => {
console.log(e.target.innerHTML);
})
应用场景二: 动态添加了节点或删除了节点
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
const ul = document.querySelector("#list");
const btn = document.querySelector("#btn");
let num = 4;
//添加列表项
btn.addEventListener("click", () => {
num++;
const oli = document.createElement("li");
oli.innerHTML = `item${num}`;
ul.appendChild(oli)
})
ul.addEventListener("click", (e) => {
console.log(e.target.innerHTML);
})