#yyds干货盘点# 【js学习笔记三十七】事件冒泡-CFANZ编程社区

#yyds干货盘点# 【js学习笔记三十七】事件冒泡

前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷

导语

事件冒泡

#yyds干货盘点# 【js学习笔记三十七】事件冒泡_事件冒泡 #yyds干货盘点# 【js学习笔记三十七】事件冒泡_事件对象_02

代码部分

<body>
        <!-- 开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。 -->
    <div class="father">
      <div class="son">son</div>
    </div>
    <script>
      // 常见事件对象的属性和方法
      // 阻止冒泡  dom 推荐的标准 stopPropagation()
      var son = document.querySelector('.son')
      son.addEventListener(
        'click',
        function (e) {
          console.log('son')
          e.stopPropagation() // stop 停止  Propagation 传播
          e.cancelBubble = true // 非标准 cancel 取消 bubble 泡泡
        },
        false
      )

      var father = document.querySelector('.father')
      father.addEventListener(
        'click',
        function () {
          console.log('father')
        },
        false
      )
      document.addEventListener('click', function () {
        console.log('document')
      })
            //只打印出son
    </script>
  </body>