js 代理事件理解及应用场景

事件代理（事件委托）：把一个元素响应事件的函数委托到另一个元素上

事件流：捕获阶段--》目标阶段--》冒泡阶段（事件委托）

<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);

}