js事件委托和事件冒泡(详解分析下)

1.js事件委托是什么

js事件委托就是把原本需要绑定在子元素上面的响应事件委托给它们的父元素或者更外层元素，可以把事件分为事件冒泡和事件捕获。点击看这个js事件委托例子。

2.js事件冒泡

当鼠标点击或其他方式触发事件时，事件会从点击的元素不断上升直到根节点。会在某一个外层捕获这个冒泡事件，执行操作。

如下只需要监听ul上是否触发点击事件，而不需要在每一个li上添加点击事件。

因为每个函数都会占用内存空间，现在只需要一个事件处理程序就可以代理所有事件，减少了内存消耗。

<div id="app">
    <ul id="content">
        <li id="1">1</li>
        <li id="2">2</li>
        <li id="3">3</li>
    </ul>
</div>

document.getElementById("content").addEventListener("click", function (event) {
  var target = event.target;
  switch (target.id) {
    case "1":
      console.log("点击了第" + target.id + "个li");
      break;
    case "2":
      console.log("点击了第" + target.id + "个li");
      break;
    case "3":
      console.log("点击了第" + target.id + "个li");
      break;
    default:
      break;
  }
  // 阻止事件冒泡 
  event.stopPropagation();
},false);

3.js事件捕获

js事件捕获正好与事件冒泡相反，是从顶层开始项下寻找。然后被各个元素的事件监听器捕获。

设置 addEventListener 的第三个参数 useCapture 为true后， 事件捕获会从 app->content->btn 依次触发。

<div id="app">
    <div id="content">
        <button id="btn">按钮</button>
    </div>
</div>

document.getElementById("app").addEventListener("click", function (event) {
  var target = event.target;
  console.log(target);
}, true);

document.getElementById("content").addEventListener("click", function (event) {
  var target = event.target;
  console.log(target);
}, true);

document.getElementById("btn").addEventListener("click", function (event) {
  var target = event.target;
  console.log(target);
}, true);