Js进阶17-事件委托和事件代理

事件委托是指借用事件冒泡或者事件捕获机制，如果我们有许多以类似方式处理的元素，那么就不必为每个元素都分配一个事件处理程序 —— 而是将单个处理程序放在它们的共同祖先上。

事件代理即是利用事件冒泡</span>的机制把里层所需要响应的事件绑定到外层。

使用事件代理为每个 li 添加 click 事件的方式：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

const ul = document.querySelector('ul'); // querySelector 方法仅仅返回匹配指定选择器的第一个元素
ul.addEventListener('click', function (event) {
  let target = event.target;
  // 获取到被点击节点的祖先节点，直到其父节点为 ul
  while (target && target.parentNode !== this) {
    target = target.parentNode;
  }
  if (target.tagName === 'LI' && target.parentNode === this){
    alert(`${target.innerText}被点击了`);
  }
});

这样一个简单版的事件代理就实现了，它有什么好处：

(1) 只需要绑定一个事件到 ul 上，占用的内存更小；

(2) 可以为动态添加的元素监听事件，不需要每添加一个元素就重新绑定一次。

事件委托是一个叫法，例如上面的例子，ul 为 li 代理 click 事件，这就叫做事件代理。也可以说是 li 将 click 事件委托给 ul，这就叫做事件委托。