04-事件 – nobility blog

事件

需要事件操作的对象都部署有EventTarget接口，所有的DOM节点和一些浏览器内置对象如XMLHttpRequest和window

EventTarget接口

为同一事件绑定同一监听函数该函数只会执行一次，绑定不同监听函数可以执行多个函数

listener监听函数的第一个参数是一个触发的事件对象，该位置还可以是一个带有handleEvent方法的对象

useCapture位置还可以是一个配置对象

capture：是否在事件捕获阶段触发

once：该事件是否只监听一次

passive：是否忽略浏览器默认行为

方法名	描述
`EventTarget.addEventListener(eventName,listener,useCapture)`	为当前对象绑定事件，事件名是`eventName`，触发事件的回调函数是`listener`，`useCapture`是是否在事件捕获阶段触发
`EventTarget.removeEventListener(eventName,listener,useCapture)`	移除绑定的事件，要求于绑定时的参数完全一致才能移除成功，也就是说监听函数不能在是匿名函数
`EventTarget.dispatchEvent(event)`	手动为当前对象触发一个事件，`event`是一个事件对象，需要通过事件对象的构造函数指定事件名称，而不是字符串形式的事件名

事件模型

绑定事件

事件监听函数中的this指向的是这个元素节点，若是箭头函数其this会指向宿主环境，可能是顶层对象，所以监听函数中若想使用this就不要使用监听韩素

共有三种方式绑定事件：

HTML的on前缀属性（其实是GlobalEventHandlers接口的属性）：要求属性值是触发事件执行的js代码，所以不能是函数名，而是执行函数的语句
Element节点的on前缀属性：要求是绑定的是监听函数，为同一事件属性绑定多个函数时会覆盖掉前面绑定的监听函数
使用EventTarget接口的方法：可以为同一个事件绑定多个不同的监听函数；可以指定触发阶段；不仅仅DOM实现了该接口，如XMLHttpRequest和window等内置对象也可以使用该接口的方法

事件流

当父元素和子元素绑定了同一个事件时，该事件流会在父元素与子元素之间传播一个来回，共有三个阶段：

从父元素到子元素节点，称为捕获阶段
到达目标节点时，称为目标阶段
又从子元素回传给父元素，称为冒泡阶段

使用EventTarget接口只能指定捕获和冒泡这两个阶段，所以若同时指定两个阶段的回调函数，则会触发两次该监听函数；使用Element节点的on前缀属性只能是冒泡阶段

事件委托

利用事件冒泡的特性，为父元素阶段绑定一个事件，子元素触发事时该事件会冒泡到父元素上，所以相当于为每个子元素绑定了一个监听函数

Event对象

每个事件在触发后都会产生一个事件对象，也就是事件监听函数的第一个参数，事件对象也可以通过构造函数的方式手动创建

该对象是事件中的顶层对象，所有事件对象都是该对象的子类对象

构造函数

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的部分属性

配置项	说明
`bubbles`	该事件对象是否冒泡，默认是`false`
`cancelable`	该事件是否可以取消默认行为，即能否用`Event.preventDefault()`取消这个事件

实例属性

属性名	描述
`Event.target`	触发该事件的目标节点，在没有子节点的情况下就是`this`，有子节点且有事件委托情况下就是子节点
`Event.currentTarget`	绑定该事件的节点，也就是`this`，箭头监听函数无法使用`this`可以使用该属性代替
`Event.cancelBubble`	设置该事件是否冒泡，`Event.stopPropagation()`的别名
`Event.eventPhase`	该事件所处的阶段；0=未触发，1=冒泡阶段，2=目标阶段，3=捕获阶段
`event.defaultPrevented`	判断该事件是否取消过了默认行为，即是否成功调用过了`Event.preventDefault()`方法取消了默认行为
`Event.type`	查看该事件的名称
`Event.timeStamp`	事件发生的时刻，从页面加载时算起始时间
`Event.isTrusted`	判断该事件是否由真实用户产生的

实例方法

方法名	描述
`Event.preventDefault()`	取消浏览器默认行为
`Event.stopPropagation()`	阻止事件传播，但是本节点的该事件其他监听函数还会执行
`Event.stopImmediatePropagation()`	立即阻止事件传播，本节点的该事件其他监听函数不会执行
`Event.composedPath()`	返回一个数组，元素是依次是事件冒泡的顺序的DOM元素

UIEvent接口

继承自Event接口

实例属性

属性名	描述
`UIEvent.pageX`	事件相对整个文档的水平坐标位置
`UIEvent.pageY`	事件相对整个文档的垂直坐标位置

鼠标事件对象

触发鼠标事件对象的事件

事件的触发顺序：mousedown > mouseup > click > dblclick

wheel事件触发的是WheelEvent，其他都是触发的是MouseEvent

事件名	描述
`mousedown`	鼠标按下
`mouseup`	鼠标弹起
`click`	单击事件
`dblclick`	双击事件
`mousemove`	鼠标在元素内部移动
`mouseenter`	鼠标移入，只会触发一次
`mouseleave`	鼠标移出，只会触发一次
`mouseover`	鼠标移入，移入子元素也会触发，会触发多次，适合事件委派
`mouseout`	鼠标移出，移入子元素也会触发，会触发多次，适合事件委派
`contextmenu`	鼠标右键
`wheel`	鼠标滚轮

MouseEvent接口

MouseEvent接口继承UIEvent接口

构造方法

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的部分属性

配置项	描述
`screenX`	鼠标相对于屏幕的水平位置，默认值为0
`screenY`	鼠标相对于屏幕的垂直位置，默认值为0
`clientX`	鼠标相对于程序窗口的水平位置，默认值为0
`clientY`	鼠标相对于程序窗口的垂直位置，默认值为0
`button`	0=鼠标左键，1=鼠标中键，2=鼠标右键；默认为0
`buttons`	同时按下了那个键，由三个比特位表示：`001`=鼠标左键，`010`=鼠标右键，`100`=鼠标中键；默认为`000`
`relatedTarget`	事件的次要目标，比如鼠标移入移出时代表从哪个节点移入或移除的，默认为`null`
`ctrlKey`	是否同时按下了Ctrl键，默认为`false`
`shiftKey`	是否同时按下了Shift键，默认为`false`
`altKey`	是否同时按下了Alt键，默认为`false`
`metaKey`	是否同时按下了win或mac键，默认为`false`

实例属性

属性名	描述
`MouseEvent.movementX`	鼠标`mousemove`事件之间移动的水平相对距离
`MouseEvent.movementY`	鼠标`mousemove`事件之间移动的垂直相对距离
`MouseEvent.offsetX`	鼠标与目标节点左侧padding的水平距离
`MouseEvent.offsetY`	鼠标与目标节点上侧padding的垂直距离

实例方法

方法名	描述
`MouseEvent.getModifierState(keysTar)`	判断点击时是否按下了键盘上的某个键，该参数要查表

WheelEvent接口

WheelEvent接口继承MouseEvent接口

构造方法

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性

配置项	描述
`deltaX`	滚轮的水平滚动量，默认是0.0
`deltaY`	滚轮的垂直滚动量，默认是0.0
`deltaZ`	滚轮的Z轴滚动量，默认是0.0
`deltaMode`	上面三个属性滚动量单位；0=像素，1=行，2=页；默认是0.0

键盘事件对象

触发键盘事件对象的事件

事件的触发顺序：keydown > keypress > keyup

若按下不松开会交替触发keydown和keypress

事件名	描述
`keydown`	键盘按下
`keypress`	按下有值的键，比如功能键就不算有值的键
`keyup`	键盘弹起

KeyboardEvent接口

KeyboardEvent接口继承UIEvent接口

构造方法

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性

配置项	描述
`key`	当前按下的键的字符串形式，该字符串与键盘输入内容相对应，比如`a`就是`a`、`A`就是`A`
`code`	当前按下的键的字符串形式，该字符串是键盘编码值，比如`a`就是`KeyA`、`A`就是`KeyA`
`location`	当前按下的键所处位置；0=无法判断，1=左侧，2=右侧，3=小键盘，左右侧仅适用于两个按键的键
`repeat`	该键是否被一直按着不放
`ctrlKey`	是否同时按下了Ctrl键，默认为`false`
`shiftKey`	是否同时按下了Shift键，默认为`false`
`altKey`	是否同时按下了Alt键，默认为`false`
`metaKey`	是否同时按下了win或mac键，默认为`false`

实例方法

方法名	描述
`MouseEvent.getModifierState(keysTar)`	判断点击时是否按下了键盘上的某个键，该参数要查表

进度事件

触发进度事件对象的事件

主要由资源下载和和上传触发

事件名	描述
`abort`	外部资源中止加载时触发，用户主动触发，因为错误中止不会触发
`error`	因为错误导致资源中止加载时触发
`load`	资源加载成功时触发
`loadstart`	资源开始加载时触发
`loadend`	资源加载结束时触发
`progress`	外部资源加载过程中不断触发
`timeout`	加载超时触发

ProgressEvent接口

构造方法

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性

配置项	描述
`ProgressEvent.lengthComputable`	布尔值，表示加载的总量是否可以计算，默认是`false`
`ProgressEvent.loaded`	表示已经加载的量，默认是0
`ProgressEvent.total`	表示需要加载的总量，默认是0

表单事件对象

触发键盘事件对象的事件

事件名	描述	触发该事件的特定表单元素
`input`	内容发生改变，会连序触发	`<input>`、`<select></select>`、`<textarea></textarea>`和对于打开`contenteditable`属性的元素
`select`	选中文本	`<input>`和`<textarea></textarea>`选中文本时
`change`	内容发生改变，只会在修改完毕后触发一次	`<input>`、`<select></select>`、`<textarea></textarea>`和对于打开`contenteditable`属性的元素
`invalid`	表单校验不通过	设置了表单内容校验的表单元素
`reset`	重置表单	`<form><from>`表单域元素
`submit`	提交表单	`<form><from>`表单域元素

InputEvent接口

InputEvent接口继承UIEvent接口

构造方法

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性

配置项	描述
`InputEvent.data`	发生改变的内容
`InputEvent.inputType`	发生改变的类型

触摸事件对象

触发触摸事件对象的事件

事件名	描述
`touchstart`	开始触摸
`touchmove`	滑动触摸
`touchend`	结束触摸
`touchcancel`	取消触摸

TouchEvent接口

TouchEvent接口继承UIEvent接口

构造方法

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性

配置项	描述
`touches`	`TouchList`数据结构，包含当前所有的触摸点`Touch`对象，默认是空数组
`targetTouches`	`TouchList`数据结构，包含处于当前元素上的所有触摸点`Touch`对象，默认是空数组
`changedTouches`	`TouchList`数据结构，包含两次触摸事件之间状态改变的触摸点`Touch`对象，默认是空数组
`ctrlKey`	是否同时按下了Ctrl键，默认为`false`
`shiftKey`	是否同时按下了Shift键，默认为`false`
`altKey`	是否同时按下了Alt键，默认为`false`
`metaKey`	是否同时按下了win或mac键，默认为`false`

TouchList接口

该集合是一个伪数组结构，拥有length属性和数组下标，成员是Touch触摸点对象，主要是由TouchEvent对象中的touches、targetTouches和changedTouches属性存储的使用的数据结构

Touch接口

代表一个触摸点，该接口没有继承任何接口也没有任何子类接口，是一个独立的接口

构造方法

该构造方法必须有一个配置对象作为参数，配置如下：这些配置也是实例对象的属性

配置项	描述
`identifier`	该触摸点的唯一id，没有默认值，是必须属性
`target`	该触摸点发生时所在的元素上，没有默认值，是必须属性
`screenX`	触摸点相对于屏幕的水平位置，默认值为0
`screenY`	触摸点相对于屏幕的垂直位置，默认值为0
`clientX`	触摸点相对于程序窗口的水平位置，默认值为0
`clientY`	触摸点相对于程序窗口的垂直位置，默认值为0
`pageX`	触摸点相对整个文档的水平坐标位置，默认值为0
`pageY`	触摸点相对整个文档的垂直坐标位置，默认值为0
`radiusX`	触摸点大小水平半径，默认值为0
`radiusY`	触摸点大小垂直半径，默认值为0
`rotationAngle`	触摸点旋转角度，默认值为0
`force`	触摸点的压力，0到1之间，默认值为0

拖拽事件对象

触发触摸事件对象的事件

需要将元素的draggable属性设置为true

事件名	描述
`drag`	拖拽元素：拖拽过程中，连序触发
`dragstart`	拖拽元素：拖拽开始
`dragend`	拖拽元素：拖拽结束
`dragleave`	拖拽元素离开目标元素
`dragenter`	目标元素：拖拽元素进入时
`dragover`	目标元素：拖拽元素停留在目标元素上，需要在此事件上取消默认事件，否则默认会归位
`drop`	目标元素：拖拽元素在目标元素上松开鼠标时

DragEvent接口

DragEvent接口继承MouseEvent接口

构造方法

通常使用事件的构造函数是用来做EventTarget.dispatchEvent(event)方法的参数来手动触发事件的
该构造函数接收两个参数，第一个参数是字符串形式的事件名称，第二个参数是一个可省略的配置对象，配置如下：这些配置也是实例对象的属性

配置项	描述
`dataTransfer`	`DataTransfer`实例对象，可以为`null`但是不能为其他值

DataTransfer接口

构造方法

DataTransfer实例对象作为DragEvent对象中的dataTransfer属性
该构造方法不接受任何参数

实例属性

属性名	描述
`DataTransfer.dropEffect`	拖拽时鼠标效果，需要在`dragover`事件中使用；`copy`=复制、`move`=移动、`link`=连接、`none`=禁止放下
`DataTransfer.effectAllowed`	限制`dropEffect`的操作，需要在`dragstart`事件中使用；除拉`dropEffect`中的字符串之外，还有`copyLink`=允许复制或连接操作、`copyMove`=允许复制或移动操作、`linkMove`=允许连接或移动、`all`=允许所有
`DataTransfer.files`	拖拽本地文件到网页时的文件列表，需要将`dragover`和`drop`默认行为取消掉，在`drop`事件中对该属性进行操作
`DataTransfer.types`	拖拽元素的类型，在`drop`事件中对该属性进行判断
`DataTransfer.items`	包含本次所有的拖拽对象，在`drop`事件中使用，该对象是`DataTransferItemList`集合实例，该集合中存放`DataTransferItem`元素

DataTransferItemList接口

方法或属性名	描述
`length`	成员数量
`add(data,type)`	添加通过指定内容和类型的字符串，类型是`MIME`值，比如`text/html`
`add(file)`	添加一个文件对象
`remove(index)`	删除指定位置的成员
`clear()`	清空集合

DataTransferItem接口

方法或属性名	描述
`kind`	成员的种类，`string`或`file`
`type`	字符串的类型`MIME`值
`getAsFile()`	若是文件则返回该文件，否则返回null
`getAsString(callback)`	若是字符串则使用异步回调函数处理该字符串，回调函数中的第一个参数是该字符串

实例方法

方法名	描述
`DataTransfer.setData(type,data)`	用于在`dragstart`事件中像后续事件传递信息，`type`是`MIME`值的数据类型，`data`是具体数据
`DataTransfer.getData(type)`	获取指定类型的设置数据
`DataTransfer.clearData()`	清空设置的数据
`DataTransfer.setDragImage(imgNode,x,y)`	在`dragstart`事件中使用，将拖拽元素拖拽时替换为这个图片元素；x和y是相对鼠标的位置；只能是`img`节点元素，否则无效果