事件代理(事件委托):把一个元素响应事件的函数委托到另一个元素上
事件流:捕获阶段--》目标阶段--》冒泡阶段(事件委托)
<button id="btn"> 添加 </button>
<ul id="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
let listLi = document.querySelectorAll("li");
for(let i =0; i<listLi.length; i++){
listLi[i].οnclick=function(e){ //每个事件都在当前元素上,这样消耗内存很大,每次点击都会触发。
//e.target返回触发事件对象
console.log(e.target.innerHTML);
}
}
//事件委托
//只要操作一次dom,从而提高了程序的性能。
let ul = document.querySelector("#list");
ul.onclick = function(e){ //委托到上级ul上(冒泡)
console.log(e.target.innerHTML);
}
// 添加
var num = 4;
let btn = document.querySelector("#btn")
btn.onclick = function(){
num ++;
let li = document.createElement("li");
li.innerHTML = `item${num}`
ul.appendClick(li);
}