《JS原理、方法与实践》- DOM事件

事件就是用来完成“当...时做...”的功能，也就是起监听作用。事件给我们提供了一个跟文档对象进行沟通的接口。 事件主要由三部分组成：事件的目标（EventTarget）、事件监听器（EventListener）和事件本身（Event）。事件的目标可以理解为事件的主人，也就是谁的事件，在DOM中就是各种Node节点；DOM中的事件监听器可以理解为处理事件的函数；事件就是当事件目标（EventTarget）上特定的事件发生之后发送给事件监听器的信息。 事件流 Events子标准中规定事件的传递首先从最外层节点（Document）开始，然后逐层向内部传播，一直传到最内层节点之后再逐层往外返回。整个传播流程可以 分为两个过程和三个阶段： 两个过程分别叫做：捕获过程和冒泡过程 捕获过程时从外向内传播的过程，冒泡过程则是从内向外的过程 三个阶段分别叫做： 捕获阶段，目标阶段和冒泡阶段 捕获阶段和冒泡阶段分别对应的时捕获过程和冒泡过程，目标阶段指的时事件传递到最内层节点时的阶段。 DOM标准中默认的事件处理是在冒泡过程中进行的！ EventTarget EventTarget指事件的目标（主人），即各种不同的节点，DOM中的节点都可以用作EventTarget。EventTarget中共有三个方法属性，如下所示。 addEventListener(type, listener, capture): 给节点添加监听器，即事件处理程序 removeEventListener(type, listener, capture): 删除节点相应的监听器 dispatchEvent(event): 发布事件 其中，type指的是要监听的事件类型，listener就是要添加或删除的事件监听器EventListener，一般包含一个event参数的处理方法，capture为布尔类型，表示是否使用捕获过程，默认值为false。 代码示例： 测试结果 EventListener EventListener是事件监听器接口，用于对接到的事件具体执行处理。其中只有一个方法handleEvent(event)用于具体处理事件。EventListener接口在实际使用中就是一个包含Event参数的方法。 Event Event是事件接口，用来包含事件中的信息，例如事件所在的事件目标、事件类型。如果是单及事件，那么还会包含鼠标单击时的坐标信息等，事件监听器函数在处理事件时都会接收到一个Event参数。 Event是总的事件接口，DOM2中共有4种具体的事件类型，分别是UIEvents、MouseEvents、MutationEvents和HTMLEvents。可以使用DOMImplementation的hasFeature方法来判断浏览器是否支持某种类型事件，调用时第一个参数传入要检查的事件类型，第二个参数传入2.0就可以了。 事件类型的继承关系 Event接口 Event接口时所有事件类型的总接口，因此Event中的属性在所有的事件中都可以使用。Event包含7个只读属性、3个方法属性和3个常量属性： type： 事件类型，例如click、load等 target： 事件目标，即直接发出事件的节点 currentTarget： 当前目标，指的是在捕获或者冒泡过程中处理事件时的当前节点 eventPhase： 事件所处的阶段 cancelable： 事件是否可以被取消 timeStamp： 事件创建事件 stopPropagation（）： 停止事件流传播 preventDefault（）： 阻止默认操作，例如，submit事件提交表单、a标签的click事件打开链接等 initEvent(type, canBubble, cancelable): 初始化属性 CAPTURE_PHASE = 1: 捕获阶段 AT_TARGET = 2: 目标阶段 BUBBLING_PHASE=3:冒泡阶段 其中，最后三个属性为常量属性，用于表示eventPhase属性的接口。 Event中的stopPropagation方法用来停止事件流的传播，无论在哪个阶段，只要在事件处理方法中调用了事件的stopPropagation方法事件流，就不再接着向下传播了。 Event中的preventDefault方法用来阻止当前节点执行默认操作，但它并不会终止事件流传播，当事件的cancelbale为false时，preventDefault方法将不起作用。 UIEvents事件 UIEvents事件对应UIEvents接口。UIEvents继承自Event接口，在Event接口的基础上增加了两个只读属性和一个方法属性。只读属性时view和detail，分别表示视图和详细信息，view为Views子标准中的AbstractView类型，在浏览器中一般就是window对象；detail为整数类型，表示事件的相关信息，所表示的内容跟具体事件相关。新增的方法为initEvent, 它在原来的initEvent方法上添加了两个自己的属性，它的作用是新建UIEvent类型的事件，调用语法如下： event.initEvent(type, canBubble, cancelable, view, detail); UIEvents事件的三种类型 表中是否可冒泡和是否可取消分别对应canBubble和cancelable两个属性。 MouseEvents事件 MouseEvents事件对应MouseEvents接口。MouseEvent继承自UIEvent接口，它在UIEvent的基础上新增加了10个只读属性和一个方法属性。 10个只读属性如下: screenX: 单击位置以屏幕左上角为原点的横坐标 screenY: 单击位置以屏幕左上角为原点的纵坐标 clientX: 单击位置以浏览器内容区域左上角为原点的横坐标 clientY: 单击位置以浏览器内如区域左上角为原点的纵坐标 ctrlKey: 布尔类型，表示点击鼠标时是否按了Ctrl键 shiftKey: 布尔类型，表示单击鼠标时是否按了Shift键 altKey： 布尔类型，表示单击鼠标时是否按了Alt键 metaKey: 布尔类型，表示单击鼠标时是否按了Meta键，Meta键在普通的键盘上是没有的 button: 鼠标的哪个健被单击了，0表示左键，1表示中键，2表示右键 relatedTarget： 与事件相关联的节点，主要用于mouseover与mouseout事件。 MouseEvent接口中新增的方法为initMouseEvent，它在原来initUIEnent方法上将新增的10个属性加到参数中，它的作用是创建MouseEvent类型的事件，调用语法如下： event.initMouseEvent(type,canBubble,cancelable,view,detail,.....); MouseEvents事件的类型 click： 单击 mousedown: 按下鼠标 mouseup：松开鼠标 mouseover： 鼠标进入 mousemove: 鼠标移动 mouseout： 鼠标移出 MutationEvents事件 MutationEvents事件对应MutationEvent接口。Mutation接口继承自Event接口，它在原来的基础上添加了5个只读属性、一个方法属性和3个常量属性。 5个只读属性 relatedNode: 相关节点 prevValue： 之前的值 newValue： 新值 attrName：属性名 attrChange： 属性变化类型 事件类型 DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DOMElementNameChanged DOMNodeInserted DOMNodeInsertedIntoDocument DOMNodeRemoved DOMNodeRemovedFromDocument DOMSubtreeModified HTMLEvents事件 HTMLEvents事件没有自己单独的接口，也就是说，它直接使用Event接口。HTMLEvents事件共有12种类型，如下： HTMLEvents事件的类型 DOM0级事件 Events子标准实在DOM2种才加入的。其实，在DOM标准发布之前浏览器种就已经可以使用事件了，此类型事件一般叫做DOM0级事件。 DOM0级事件是通过节点的属性来实现的，属性的名称为“on+事件名”的格式，其中，事件名的首字母不需要大写，例如，onclick、onload、onfocus等。DOM0级事件的添加有两种方式，一种是直接作为属性写在标签中，另一种是在脚本中通过节点对象的属性 来添加。 代码示例： 测试结果 如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。 个人微信 公众号_前端微说.jpg

本文章由javascript技术分享原创和收集