阻止事件的传播、事件委托、阻止浏览器默认行为

最新推荐文章于 2024-03-01 16:16:02 发布

禁止摆烂-才浅

最新推荐文章于 2024-03-01 16:16:02 发布

阅读量581

点赞数 1

分类专栏： JavaScript ES6 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_48937489/article/details/121687203

版权

事件传播事件委托阻止默认行为 JavaScript DOM操作

关键词由CSDN通过智能技术生成

JavaScript 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

ES6

7 篇文章 0 订阅

订阅专栏

一、阻止事件的传播

因为事件的传播，会导致我们在一个元素上触发行为，会执行多个的事件处理函数

阻止事件传播：
标准浏览器： e.stopPropagation()
IE低版本： ecacelBubble = true
兼容：
方式1：if (e.stopPropagation) { } else { }
方式2： try {} catch (e) { } （尝试第一个大括号里面的代码，如果报错，执行后面的）

二、事件委托

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    ul {
      width: 300px;
      height: 1000px;
      background-color: skyblue;
    }

    li {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-bottom: 10px;
    }

  </style>
</head>
<body>

  <button>添加一个 li</button>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

  <script>
    
      事件委托
        1. 循环绑定事件
          => 给每一个 li 绑定一个点击事件
        2. 事件委托
          => 把所有 li 身上需要绑定的事件绑定给一个共同的结构父级
          => 绑定给 ul
          => 事件目标: 准确触发事件的元素
            -> 如果你点击在了 ul 身上, target 就是 ul
            -> 如果你点击在了 li 身上, target 就是 li
          => 通过事件目标来判断你点击的确实是 li
            -> if () {}
            -> 元素节点.nodeName （元素节点的节点名称） : 大写标签名  

      需求: 有一个 button 按钮, 点击的时候会添加一个 li 进入到 ul
    

    // 0. btn 的事件
    var btn = document.querySelector('button')
    btn.onclick = function () {
      // 插入节点的方式
      // var li = document.createElement('li')
      // li.innerText = '新来的'
      // ul.appendChild(li)

      // innerHTML
      // 完全覆盖式的写入
      ul.innerHTML = ul.innerHTML + '<li>新来的</li>'
    }

    // 1. 获取所有 li
    var lis = document.querySelectorAll('li')  把所有的 li 放在一个数组里面
    var ul = document.querySelector('ul')

    // 2-1. 循环绑定事件
    // lis.forEach(function (item) {
    //   item.onclick = function () { console.log(item) }
    // })

    // 2-2. 事件委托
    ul.onclick = function (e) {
      e = e || window.event
      var target = e.target || e.srcElement

      // target 就是你点击的那个元素
      if (target.nodeName === 'LI') {
        console.log('你点击的是 li', target)
      }
    }
  </script>
</body>
</html>

三、阻止浏览器默认行为

  阻止浏览器默认行为
    + 什么是浏览器默认行为
      => 不需要我们手动绑定, 本身就带有的事件行为
      => a 标签, 自带点击行为
      => form 标签, 自带表单提交
      => 框选, 自带框选效果
      => 鼠标右键单击, 自动弹出一个菜单
      => ...
    + 阻止浏览器默认行为
      => 在同类型事件里面进行阻止
      => 你要阻止 a 的自动跳转, 那么你就在 a 标签的点击事件里面阻止
      => 你要阻止 form 标签的表单提交, 那么就在 form 标签的 submit 事件里面阻止
      => 1. e.preventDefault()
        -> 标准浏览器使用
      => 2. e.returnValue = false
        -> IE 低版本使用

兼容：
       方式1： if () {} else {}
       方式2： try {} catch (err) {}
       方式3： return false

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <a href="https://www.baidu.com">阻止浏览器默认行为</a>

  <script>
    
    // 获取元素
    var a = document.getElementsByTagName('a')[0]

    a.onclick = function (e) {
      e = e || window.event
      console.log('我被点击了')

      // 阻止默认事件
      // e.preventDefault()

      // IE 低版本
      // e.returnValue = false

      return false
    }
	
	//禁止框选文本
    window.onselectstart = function () {
      return false
    }

    // 右键单击事件
    window.oncontextmenu = function () {
      console.log('右键单击了')
      return false
    }

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