欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-18 22:43:53
一、事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段、目标阶段和冒泡阶段。 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原因是当年微软和网景的浏览器大战,微软提出了事件冒泡,而网景提出了事件捕获。 1、事件冒泡 事件开始由 ......

一、事件流

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