JS中事件冒泡,事件捕获详解

0.84字数 611阅读 301

一、事件流

事件是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及以下版本不支持事件捕获。

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

推荐阅读更多精彩内容