Logo

# JavaScript教程 - 15 DOM

DOM 继续！

# 15.12 事件

重新来说回事件。

# 1 事件对象

什么是事件对象？

浏览器在事件触发时自动创建的一个特殊对象，包含了与该事件相关的所有信息和功能（包括鼠标、键盘等信息）。例如鼠标相关的事件，会包含事件触发时候的鼠标位置。

举个栗子：

鼠标在 div 中移动，获取事件对象。

<body>
  <div id="div1" style="width: 100px; height: 100px; background-color: lightblue;"></div>

  <script>
    const div1 = document.getElementById('div1');

    div1.onmousemove = function (event) {
      div1.innerHTML = event.x + ", " + event.y;  // 可以获取事件的详细信息
    };
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
  • 在上面的代码中，给 div 添加鼠标移动事件回调方法，回调方法的第一个参数就是事件对象。
  • 我们可以从事件对象中获取到鼠标当前的位置，event.x 和 event.y 表示鼠标相对于浏览器窗口的坐标，event.x 和 event.y 也可以使用 clientX 和 clientY。

运行如下：

同样，通过箭头函数或者 addEventListener 事件监听的方式也可以获取。

div1.onmousemove = event => {
  div1.innerHTML = event.x + ", " + event.y;
}

div1.addEventListener("mousemove", function () {
  div1.innerHTML = event.x + ", " + event.y;
});

div1.addEventListener("mousemove", event => {
  div1.innerHTML = event.x + ", " + event.y;
});
1
2
3
4
5
6
7
8
9
10
11

# 2 事件的常用属性

不同的事件，事件对象是不同的，但是它们都继承自 Event 对象。

<body>
  <div id="div1" style="width: 100px; height: 100px; background-color: lightblue; margin: 100px;"></div>

  <script>
    const div1 = document.getElementById('div1');

    div1.onclick = function (event) {
      console.log(event.offsetX + ', ' + event.offsetY);  // 鼠标相对于事件目标元素的坐标
      console.log(event.x + ', ' + event.y);  // 鼠标相对于浏览器窗口的坐标
      console.log(event.screenX + ', ' + event.screenY);  // 鼠标相对于屏幕的坐标
      console.log(event.pageX + ', ' + event.pageY);  // 鼠标相对于整个文档的坐标（包含滚动）
    };
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  • 上面通过一些方式获取到了鼠标相对于不同对象的位置。
内容未完......
查看完整内容 →

← 16-BOM →