JS事件冒泡寻求解答

程序员微木 2024-06-03 17:02:45
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .father {
    width: 500px;
    height: 500px;
    background-color: pink;
  }

  .son {
    width: 300px;
    height: 300px;
    background-color: purple;
  }
</style>

<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    let f = document.querySelector('.father');
    let s = document.querySelector('.son');
    f.addEventListener('mouseenter', function () {
      alert('我是爸爸')
    })
    s.addEventListener('mouseenter', function () {
      alert('我是儿子')
    })
    document.addEventListener('mouseenter', function () {
      alert('我是yeye')
    })
  </script>
</body>

</html>

在这种情况下,为什么事件冒泡先执行的是,document——father——son;侦听事件,第三个参数默认为false,开启的是冒泡阶段;不应该事件执行流程为,son——father——document嘛

...全文
435 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

2

社区成员

发帖
与我相关
我的任务
社区描述
专注于大前端开发,分享程序与商业结合的干货分享
微信公众平台微信开放平台javascript 技术论坛(原bbs)
社区管理员
  • 程序员微木
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧