事件机制捕获、冒泡

前提：给父子都添加监听方法

• 捕获 先执行父方法，在执行子方法
• 冒泡 先执行子方法，在执行父方法，默认冒泡 在子方法中执行，event.stopPrapagation 阻止冒泡 事件冒泡是实现事件委托的原理（event delegation）。

window.addEventListener(
  "click",
  function () {
    console.log("捕获");
  },
  true // 默认是 false
);

冒泡- 事件委托

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click", function (e) {
  // e.target is the clicked element!
  // If it was a list item
  if (e.target && e.target.nodeName == "LI") {
    // List item found!  Output the ID!
    console.log(
      "List item ",
      e.target.id.replace("post-", ""),
      " was clicked!"
    );
  }
});

异常 - 捕获

当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。这些 error 事件不会向上冒泡到 window ，不过（至少在 Firefox 中）能被单一的window.addEventListener 捕获。

window.addEventListener('error', (error) => {
  console.log('捕获到异常：', error);
}, true)
window.addEventListener("unhandledrejection", function(e) {
  console.log('unhandledrejection')
}, true);
<img src="./jartto.png">


// 客户端添加crossorigin属性
// 服务端添加Access-Control-Allow-Origin: *
// 否则只提示Script error，无法获取具体错误信息
<script src="https://dss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>