js中事件冒泡，事件捕获详解

2019-04-11 09:54:41来源：博客园阅读 ()

一、事件流

事件是js与HTML交互的基础，事件流描述的是页面接受事件的顺序，而事件流又分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

如果单纯的事件处理，事件捕获和事件冒泡二选一即可，导致两者并存的原因是当年微软和网景的浏览器大战，微软提出了事件冒泡，而网景提出了事件捕获。

1、事件冒泡

事件开始由最深层的元素接收，然后逐级向上传播

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
<div id="div"></div>
<script>
  let div = document.getElementById('div');
  div.onclick = function () {
    console.log('div');
  };
  document.body.onclick = function () {
    console.log('body')
  };
</script>
</body>
</html>

当点击div标签的时候，先打印出div，然后再打印出body。因为div先接收到点击事件，然后再向它的父元素body传播，再到html，最后到document。

IE，chrome，Firefox，Opera，Safari五大浏览器都支持事件冒泡。

2、事件捕获

事件开始由最外层的document捕获，然后依次向内传播，直至最深层的元素

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
<div id="div"></div>
<script>
  let div = document.getElementById('div');
  div.addEventListener('click', function () {
    console.log('div');
  }, true);
  document.body.addEventListener('click', function () {
    console.log('body')
  }, true);
</script>
</body>
</html>