浅谈事件流

最新推荐文章于 2024-01-25 16:34:59 发布

pmm0316

最新推荐文章于 2024-01-25 16:34:59 发布

阅读量265

点赞数

文章标签： js

本文链接：https://blog.csdn.net/pmm0316/article/details/87710784

版权

介绍

事件流分为2种，捕获事件流和冒泡事件流。

捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点。
冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到根节点。

冒泡演示:

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        #p {
            width: 80px;
            height: 80px;
            border: 1px solid burlywood;
        }
        #span {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<div id="div">
    <p id="p">
        <span id="span">ttttt</span>
    </p>
</div>
<script>
    let div = document.getElementById('div')
    let p = document.getElementById('p')
    let span = document.getElementById('span')
    div.onclick = function () {
      console.log('div')
    }
    p.onclick = function () {
      console.log('p')
    }
    span.onclick = function (e) {
      console.log('span')
    }
</script>
</body>
</html>

显示结果：

当单击span标签时,可以看到控制台中输出了 span p div。

在实际项目中，我们一般不希望它触发它的父元素，这时候需要阻止事件冒泡。

可以用e.stopPropagation()的方法

// 。。。
let span = document.getElementById('span')
// ....
span.onclick = function (e) {
  e.stopPropagation()
  console.log('span')
}

这时候再次点击span标签时，控制台中只输出了span，达到我们预期的目标，阻止了时间冒泡。

捕获演示：

代码：

html和css样式跟冒泡演示的代码一样

  let div = document.getElementById('div')
  let p = document.getElementById('p')
  let span = document.getElementById('span')
  /**
   * addEventListener的第三个参数默认是false
   * false时，事件冒泡
   * true时，事件捕获
   */
  div.addEventListener('click', function (e) {
    console.log('div')
  }, true)
  p.addEventListener('click', function () {
    console.log('p')
  }, true)
  span.addEventListener('click', function () {
    console.log('span')
  }, true)

点击span标签，控制台依次输出div p span，可以看出事件捕获。

同样可以用e.stopPropagation()方法阻止捕获

pmm0316

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈事件流

介绍事件流分为2种，捕获事件流和冒泡事件流。捕获事件流从根节点开始执行，一直往子节点查找执行，直到查找执行到目标节点。冒泡事件流从目标节点开始执行，一直往父节点冒泡查找执行，直到查到根节点。冒泡演示:代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8...
复制链接

扫一扫