JS事件冒泡

最新推荐文章于 2024-10-31 22:54:55 发布

Stirve unremitting

最新推荐文章于 2024-10-31 22:54:55 发布

阅读量117

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46421045/article/details/106677683

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #yeye {
      width: 350px;
      height: 400px;
      background-color: pink;
    }
    #father {
      width: 120px;
      height: 200px;
      background-color: red;
    }
    #son {
      width: 80px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="yeye">
    <div id="father">
      <div id="son"></div>
    </div>
  </div>
  <script>
    // 事件冒泡是从自己开始一层一层往外传播事件的过程
    // 一个完整事件流一定是包含捕获 -> 目标 -> 冒泡 这样一个完整过程，但是浏览器在处理事件的时候默认在冒泡阶段处理
    // IE浏览器不认识捕获，只能在冒泡阶段处理
    document.onclick = function () {
      console.log('document')
    }
    document.querySelector('#yeye').onclick = function () {
      console.log('yeye')
    }
    document.querySelector('#father').onclick = function (e) {
      console.log('father')
      e = e || window.event
      // 如果某些情况下不希望冒泡，那么可以阻止
      // 阻止冒泡的兼容写法：阻止事件从当前元素往外传播
      if (e.stopPropagation) {
        e.stopPropagation()
      } else {
        e.cancelBubble = true
      }
    }
    document.querySelector('#son').onclick = function () {
      console.log('son')
    }

  </script>
</body>
</html>