[TOC]

介绍

  • 事件对象是什么
    • 也是个对象，这个对象里有事件触发时的相关信息
    • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
  • 如何获取事件对象
    • 在事件绑定的回调函数的第一个参数就是事件对象
    • 一般命名为event、 ev、 e

image.png

事件对象常用属性

  • target
    • 指触发事件的具体目标，也就是最具体的那个元素，事件源。是个只读属性
    • 就算绑定事件处理程序的是大容器，但是只要是由于内部某个具体元素冒泡到大容器上触发的，那么 target 就是那个具体元素。
  • currentTarget
    • 事件处理程序当前正在处理事件的那个元素，也就是事件处理程序中的 this 始终指向这个 currentTarget 的值。
    • 如果事件处理程序绑定的元素，与具体的触发元素是一样的，那么 this、currentTarget、target 三个值是相同的。
  • type
    • 获取当前的事件类型
  • clientX/clientY
    • 获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY
    • 获取光标相对于当前DOM元素左上角的位置

  • key

    • 用户按下的键盘键的值
    • 现在不提倡使用keyCode ```javascript 

    
- preventDefault 阻止默认行为
   - 用于阻止特定事件的默认行为，如 `a` 标签的跳转等。
   - `e.preventDefault()`
- stopPropagation 阻止冒泡
   - 停止事件在 DOM 层次上的传播，即取消进一步的事件捕获或冒泡。理解为事件执行阶段的”`break`”
- js提交表单
```javascript
var form = document.querySelector(‘form’);
//1.提交
form.submit();
//2.重置表单
form.reset();

    背景图片视觉落差案例

    <style>
    body,
    html {
      margin: 0;
      height: 100%;
    }

    div {
      height: 100%;
      background: url("bg.png") no-repeat;
      background-position: 50% 50%;
    }
</style>

<body>
  <div></div>
</body>

<script>
  // 思路：给body设置mousemove，用于获取鼠标的坐标，然后以此来改变body的backgroundPosition
  document.querySelector('div').addEventListener('mousemove', function (e) {
    var x = event.clientX;
    var y = event.clientY;
    //x y 减去宽高的一半
    x = x - innerWidth / 2;
    y = y - innerHeight / 2;
    //让x和y除以200，减少数字的变化范围
    x /= 200;
    y /= 50;
    // console.log(x, y);
    this.style.backgroundPosition = `${50 + x}% ${50 + y}%`;
  })
</script>

    图片跟随鼠标移动案例

    <body>
  <img src="bg.png" alt="" style="position: absolute;">

  <script>
    let img = document.querySelector('img')

    // 给 document 注册 mousemove 事件，当鼠标移动的时候触发
    document.addEventListener('mousemove', function (e) {
      // 获取鼠标的位置
      let x = e.clientX
      let y = e.clientY
      // console.log(x, y)
      // 设置图片的 left 样式和 top 样式
      img.style.left = `${x - 30}px`
      img.style.top = `${y - 30}px`
    })
  </script>
</body>