当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js中事件冒泡，事件捕获详解

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

2019年04月11日  | 移动技术网IT编程  | 我要评论

一、事件流

事件是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>

当点击div标签的时候，最先打印body，然后再打印出div。因为addeventlistener函数的第三个参数为true时，函数处理捕获事件，document先捕获点击事件，依次传播到html—body—div。

ie9，chrome，firefox，opera，safari五大浏览器都支持事件捕获，ie8及以下版本不支持事件捕获。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网