一、简介

事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。

DOM 支持大量的事件，下面是一些常见事件种类

  • 鼠标事件
  • 键盘事件
  • 进度事件
  • 表单事件
  • 触摸事件
  • 拖拉事件

二、Event 对象

DOM 节点的事件操作（监听和触发）都定义在 EventTarget 接口，所有的节点对象都部署了这个接口。该接口主要提供了三个实例方法

  • addEventListener()：绑定事件的监听函数
  • removeEventListener()：移除事件的监听函数
  • dispatchEvent()：触发事件

事件发生后，会产生一个事件对象，作为参数传给监听函数。我们可使用 Event 构造函数创建一个 Event 实例。

  1. const event = new Event(type, options)

options 是事件的对象的配置

  • bubbles：布尔值，可选，默认为 false，表示事件对象是否冒泡
  • cancelble：布尔值，可选，默认为 false，表示事件是否可以被取消

二、各个事件

1. 鼠标事件

鼠标有四个点击相关的事件，五个移动相关的事件

  • click：按下鼠标时触发
  • dblclick：在同一个元素双击鼠标时触发
  • mousedown：按下鼠标键时触发
  • mouseup：抬起鼠标键时触发
  • mousemove：鼠标在一个节点内部移动时触发（为了避免性能问题，建议对该事件的监听函数做一些限定）
  • mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件
  • mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
  • mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件
  • mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件

鼠标事件所产生的事件对象都是 MouseEvent 实例。此外滚动事件、拖拉事件也是 MouseEvent 实例。我们可使用 MouseEvent() 构造函数新建一个 MouseEvent 实例。

  1. const event = new MouseEvent(type, options)

MouseEvent 接口的实例属性

  • altKey：事件发生时，是否按下 Alt 键
  • ctrilKey：事件发生时，是否按下 Ctrl 键
  • metaKey：事件发生时，是否按下 Meta 键
  • shiftKey：事件发生时，是否按下 Shift 键
  • button：返回一个数值，表示事件发生时按下了鼠标的哪个键，0-主键，1-辅助键，2-次键
  • buttons：返回一个三个比特位的值，表示事件发生时按下了鼠标的哪个键，比如 1 表示按下主键
  • clientX、clientY：返回鼠标位置相对于浏览器左上角的水平/垂直坐标
  • movementX、movementY：返回当前位置与上一个 mousemove 事件之间的水平/垂直距离
  • screenX、screenY：返回鼠标位置相对于屏幕左上角的水平/垂直坐标
  • offsetX、offsetY：返回鼠标位置与目标节点左侧/上方的 padding 边缘水平/垂直距离
  • pageX、pageY：返回鼠标位置与文档左侧/上侧边缘的距离

2. 键盘事件

3. 进度事件

4. 表单事件

5. 触摸时间

6. 拖拉事件

7. 其他常见事件

三、参考链接

JavaScript 教程 - 阮一峰：https://wangdoc.com/javascript/events/index.html