js事件委托

事件委托：给父元素绑定事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把事件委托给父元素去处理。

作用：减少内存消耗，提高性能;动态绑定事件;减少冒泡、委托对事件连环触发带来的影响；替代原生JS中循环绑定事件的操作

原理: addEventListener默认是在事件冒泡阶段触发

事件捕获：事件从window对象自上而下向目标节点传播的阶段；

html -> body -> div -> span

// 目标阶段：真正的目标节点正在处理事件的阶段；

事件冒泡：事件从目标节点自下而上向window对象传播的阶段。

html <- body <- div <- span

捕获阶段-》目标阶段-》冒泡阶段

事件委托应用场景举例:

<ul>

  <li>香蕉</li>

  <li>苹果</li>

  <li>鸭梨</li>

</ul>

点击对于的li就删除对应的li

(1)操作dom的方法, 如果dom节点很多，效果不好:

let li = document.querySelectorAll(“li”);

let ul = document.querySelector(“ul”);

for (let i = 0; i < li.length; i++) {

  li[i].onclick = function() {ul.removeChild(this)}

}

(2)事件委托方法

let ul = document.querySelector(“ul”);

ul.onclick = function(e) {

  ul.removeChild(e.target);

}