事件相关

EventTatget 接口

所有的节点对象都部署了 EventTarget 接口，包括一些需要事件通信的浏览器内置对象 如：XMLHttpRequest。AudioNode 等也部署了这个接口
在这个接口上主要部署了三个方法

• EventTarget.addEventListener（）
• EventTarget.removeEventListener（）
• EventTarget.dispactchEvent()

事件模型

监听函数

给节点添加事件一共有三种方法

• 作为属性添加到 HTML 中
• 通过元素节点的事件属性进行添加
• 使用 addEventListener 添加事件
  推荐使用第三种事件的监听方式

this 的指向

监听函数内部的 this 指向触发事件的那个元素节点

事件的传播

事件的传播一共分为三个阶段

• 从 Window 对象 传到目标节点上，被称为 捕获阶段
• 在目标节点上触发，被称为 目标阶段
• 从目标节点传回 window 对象上， 成为 冒泡阶段

事件的代理

由于事件的冒泡阶段向上传播到夫节点，因此可以把子节点的事件定义在父节点上，有父节点监听统一处理多个子元素的事件，这个方式叫做事件的代理。

Event 对象

在事件触发后都会产生一个 事件对象并作为参数传给监听函数，这是浏览器提供的原生的 Event 对象，所有的事件都继承了这个 Event.prototype 对象
Event 同时也是一个构造函数，可以通过 new 创建一个实例，他接受两个参数，第一个参数是一个字符串，表示事件的名称，第二个参数表示对象的配置， bubbles 和 cancelable 都是布尔值，前一个设置是否冒泡，后者设置是否可以被取消

实例属性

• Event.cancelable
  // 表示事件是否可以取消

• Event.cancelBubble
  // 返回一个布尔值，表示该事件是否调用过 stopPropagation（）

• Event.defaultPrevented
  // 返回一个布尔值，表示事件是否调用过 defaultPrevented 方法

• Event.currentTarget
  // 返回事件在传播过程中当前正在通过的节点，会随事件的传播而改变。

• Event.target
  // 返回原始触发事件的那个节点，且不会随事件的传播发生改变

• Event.type
  // 返回一个字符串，表示事件类型，该属性只读

实例方法

• Event.preventDefault()
  // 取消浏览器对当前事件的默认行为
• Event.stopPropagation()
  // 阻止事件在 DOM 中继续传播，防止触发定义在其他节点上的监听函数，但不包括当前节点上的其他监听函数
• Event.stoplmmediateProgatation()
  // 阻止同一个事件的其他监听函数被调用，不管是在当前节点还是其他节点，都被被阻止传播， 比 stopPropagetion（） 更彻底
• Event.composedPath
  // 返回一个数组，成员是事件最底层的节点以及一次冒泡经过的所有上层节点。

鼠标事件

鼠标事件的种类

• click
• dbclick
• mousedown
• mouseup
• mousemove
• mouseenter
• mouseover
• mouseout
• mouseleave
• contextmenu
• wheel

MouseEvent 接口

MouseEvent 接口代表了鼠标相关的事件，所有的事件都是 MouseEvent 的实例，同时，滚动和拖拉也是 MouseEvent 的实例。
MouseEvent 接口即成了Event 接口，拥有 Event 接口的所有属性和方法，同时也拥有自己的属性和方法

MouseEvent 接口的实例属性

以下省略 MouseEvent.

• altKey、ctrlKey、metaKey、shiftKey
  // 返回一个布尔值，表示事件发生时有没有同时按下对应按键，属性为只读。
• button
  //返回一个数值，表示事件发生时按下了鼠标的那一个键，该属性为只读，0 为主键 1为滚轮 2为右键
• clientX、clientY
• movementX、movementY
• screenX、screenY
• offsetX、offsetY
• pageX、pageY

MouseEvent 接口的实例方法

• getModifierState（）
  // 返回一个布尔值，表示没有按下特定的功能键，它的参数是功能键的字符串

wheelEvent 接口

WheelEvent 接口继承了MouseEvent 实例，代表鼠标滚动事件的实例对象，鼠标滚轮相关事件只有 wheel 事件，用户滚动滚轮就会触发这个事件。

实例属性

以下省略WheelEvent.

• deltaX、deltaY、deltaZ
  // 表示滚轮的水平，垂直，Z轴的滚动量
• deltaMode 数值，表示上面三个属性的单位，0是像素，1是行 2是页

待续… …