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

发布时间:2019-04-10 22:00:17发布者:Mr.Zhang阅读(443)

一、事件流

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





本文转自博客园,原文地址:https://www.cnblogs.com/liuhw/p/10685599.html

自己做的一款记账小程序,请多多支持