js 事件的冒泡

最新推荐文章于 2024-09-11 11:02:35 发布

艾斯比的日常

最新推荐文章于 2024-09-11 11:02:35 发布

阅读量302

点赞数

分类专栏： front

本文链接：https://blog.csdn.net/u012745499/article/details/117485176

版权

front 专栏收录该内容

86 篇文章 1 订阅

订阅专栏

js 事件的冒泡: 自下而上触发事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div class="div1" style="width: 500px; height: 500px; background-color: red">
  <div class="div2"  style="width: 100px; height: 100px; background-color: lightgrey">

  </div>

</div>

<script>
  /*
    冒泡: 自下而上, 触发事件

   */
  document.querySelector('.div1').addEventListener('click', function (e) {
    console.log('.div1 click...')
  })
  document.querySelector('.div2').addEventListener('click', function (e) {
    console.log('.div2 click...')
  })
  document.body.addEventListener('click', function (e) {
    console.log('body click...')
  })
</script>

</body>
</html>