Coding-everyday

# 1. 事件的代理/委托

事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件

事件委托(事件代理)指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同的响应。

举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。

关键是 e.target

优点：

  • 可以减少事件注册，节省大量内存占用
  • 可以将事件应用于动态添加的子元素上

但使用不当会造成事件在不应该触发时触发

ulEl.addEventListener(
  "click",
  function (event) {
    var target = event.target || event.srcElement;
    if (target && target.nodeName.toUpperCase() === "LI") {
      console.log(target.innerHTML);
    }
  },
  false
);

# 2. 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件？

采用事件代理，给父容器绑定事件，然后通过 event.target 判断是否是图片类型，是的话，执行事件逻辑。

# 3. 事件代理的好处

  1. 代码简洁
  2. 比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。
  3. 事件委托技术可以避免对每个子元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。 使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

# 4. 什么时候用事件委托？

当子元素有很多，需要对子元素的事件进行监听的时候。

← 代码相关 →