JavaScript事件处理：冒泡、默认行为与解绑-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_57162921/article/details/134887036

一、阻止事件冒泡

e.stopPropagation() 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <div class="son">son</div>
    </div>
    <script>
      const box = document.querySelector('.box')
      const son = document.querySelector('.son')

      son.addEventListener('click', function (e) {
        e.stopPropagation() // 阻止事件冒泡
        console.log('son')
        alert('son')
      })
      box.addEventListener('click', function () {
        console.log('box')
        alert('box')
      })
    </script>
  </body>
</html>

二、阻止默认行为

e.preventDefault() 阻止默认行为

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="https://www.baidu.com">
      <input type="text" name="username" />
      <button>按钮</button>
    </form>
    <a href="https://www.baidu.com">百度</a>
    <script>
      // 默认行为 超链接点击 默认会跳转
      const alink = document.querySelector('a')
      const form = document.querySelector('form')
      const ipt = document.querySelector('input[name=username]')
      alink.addEventListener('click', function (e) {
        e.preventDefault() // 阻止跳转
        alert('ok')
      })

      form.addEventListener('submit', function (e) {
        if (ipt.value.trim() === '') {
          e.preventDefault() // 阻止默认跳转
        }
      })
    </script>
  </body>
</html>

三、事件解绑

1、DOM 0级事件解绑

事件触发元素.on事件名 = null

2、DOM 2级事件解绑

事件触发元素.removeEventListener

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>dom0级事件</button>
    <button>dom2级事件</button>
    <script>
      const btn = document.querySelectorAll('button')
      btn[0].onclick = function () {
        alert('dom0')
        btn.onclick = null
      }

      function f() {
        alert('dom2')
        // 解除事件绑定
        btn[1].removeEventListener('click', f)
      }
      btn[1].addEventListener('click', f)
    </script>
  </body>
</html>

四、窗口加载事件

1、onload 窗口加载

文档全部加载完毕包括css 图片 js等资源

2、DOMContentLoaded 窗口加载

当dom元素加载完毕就执行不必等其他资源加载完

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // 窗口加载 onload
      // 文档全部加载完毕 包括css 图片 js等资源
      // window.addEventListener('load', function () {
      //   // 给按钮绑定单击事件
      //   const btn = document.querySelector('button')
      //   console.log(btn)
      //   btn.addEventListener('click', function () {
      //     alert('中国人民万岁')
      //   })
      // })

      // DOMContentLoaded 当dom元素加载完毕就执行 不必等其他资源加载完
      document.addEventListener('DOMContentLoaded', function () {
        // 给按钮绑定单击事件
        const btn = document.querySelector('button')
        console.log(btn)
        btn.addEventListener('click', function () {
          alert('中国人民万岁')
        })
      })
    </script>
  </head>
  <body>
    <button>按钮</button>
  </body>
</html>