js-事件高级

qq_38535965

已于 2023-09-15 14:10:41 修改

阅读量35

点赞数

文章标签： javascript 前端开发语言

于 2023-09-15 13:47:47 首次发布

本文链接：https://blog.csdn.net/qq_38535965/article/details/132897868

版权

事件流

嵌套元素触发同类型事件的顺序

事件流阶段

冒泡：从目标元素逐层向上触发事件直至docment顶部结束。

捕获：从文档docment元素逐层向下触发事件直至触发元素

有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave

事件对象(event

每个事件处理函数都有接受一个event参数，该参数是一个对象保存当前事件的一些属性和方法。

如：比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

<body>
  <div class="box">
    <p>我是大盒子中的p</p>
  </div>
</body>
<script>
  let box = document.querySelector('.box')
  box.addEventListener('click', function (e) {
    // 1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
    // 2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。 
    let e = e || window.event
    console.log(e.type)
    console.log(e.target, 'e.target')
    console.log(this, 'this')
  })
</script>

阻止事件冒泡

e.stopPropagation()

兼容性写法

if(e && e.stopPropagation){
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}

阻止事件默认行为

a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不        
            执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }

事件委托

下面的案例点击li时li变色，非委托需要给每个li注册点击事件实现；事件委托只需事件绑定给父级通过点击自级冒泡相应到父级。

// 非委托
    let liArr = document.querySelectorAll("li")
    for (let i of liArr) {
      i.addEventListener("click", function () {
        i.style.backgroundColor = 'pink'
      })
    }

    // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      e.target.style.backgroundColor = 'pink'
    })

鼠标常用事件

client 相对浏览器可视区域

screen相对真个浏览器

page相对浏览器可视区域 + 被卷曲的头部区域

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .neirong {
      width: 600px;
      height: 400px;
      border: 1px solid red;
    }

    .test {
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }

    .shan {
      background-color: palegoldenrod;
      height: 1200px;
      border: 1px solid red;
    }
  </style>
</head>

<body>
  <div class="shan"></div>
  <div class="neirong"></div>
  <div class="test">

  </div>
</body>
<script>
  let test = document.querySelector(".test")
  let neirong = document.querySelector(".neirong")
  document.addEventListener('mousemove', function (e) {
    neirong.innerHTML = `
      <p>        
        <span>clientX:相对浏览器可视内容区域</span>
        <span>clientX:${e.clientX}</span>
        <span>clientY:${e.clientY}</span>
        </br>  
      <p>
      <p>        
        <span>screenX:相对设备屏幕区域</span>
        <span>screenX:${e.screenX}</span>
        <span>screenY:${e.screenY}</span>
        </br>  
      <p>
        <p>        
        <span>pageX:相对设备屏幕区域</span>
        <span>pageX:${e.pageX}</span>
        <span>pageY:${e.pageY}</span>
        </br>  
      <p>
    `
  })
</script>

</html>

键盘常用事件

京东输入框放大demo

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .PlussDH {
      display: none;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div>
    <p>公司名称: <input type="text" name="kdmc" id=""><input type="text" name="PlussDH" id="" class="PlussDH"></p>
    <p>快递单号: <input type="text" name="danhao" id=""></p>
  </div>
</body>
<script>
  let kdmc = document.querySelector("[name=kdmc]")
  let dh = document.querySelector("[name=danhao]")
  let PlussDH = document.querySelector("[name=PlussDH]")
  dh.addEventListener('keyup', function (e) {
    kdmc.style.display = 'none'
    PlussDH.value = dh.value
    if (!PlussDH.value) {
      kdmc.style.display = 'inline-block'
      PlussDH.style.display = 'none'
    } else {
      PlussDH.style.display = 'inline-block'
    }
  })
  dh.addEventListener('blur', function () {
    kdmc.style.display = 'inline-block'
    PlussDH.style.display = 'none'
  })
  dh.addEventListener('focus', function () {
    kdmc.style.display = 'none'
    PlussDH.style.display = 'inline-block'
  })
</script>

</html>