事件就是用来完成“当…时做…”的功能，也就是起监听作用。事件给我们提供了一个跟文档对象进行沟通的接口。 事件主要由三部分组成：事件的目标（EventTarget）、事件监听器（EventListener）和事件本身（Event）。事件的目标可以理解为事件的主人，也就是谁的事件，在DOM中就是各种Node节点；DOM中的事件监听器可以理解为处理事件的函数；事件就是当事件目标（EventTarget）上特定的事件发生之后发送给事件监听器的信息。
Events子标准中规定事件的传递首先从最外层节点（Document）开始，然后逐层向内部传播，一直传到最内层节点之后再逐层往外返回。整个传播流程可以 分为两个过程和三个阶段：
捕获过程时从外向内传播的过程，冒泡过程则是从内向外的过程
捕获阶段和冒泡阶段分别对应的时捕获过程和冒泡过程，目标阶段指的时事件传递到最内层节点时的阶段。
EventTarget指事件的目标（主人），即各种不同的节点，DOM中的节点都可以用作EventTarget。EventTarget中共有三个方法属性，如下所示。
addEventListener(type, listener, capture): 给节点添加监听器，即事件处理程序removeEventListener(type, listener, capture): 删除节点相应的监听器dispatchEvent(event): 发布事件其中，type指的是要监听的事件类型，listener就是要添加或删除的事件监听器EventListener，一般包含一个event参数的处理方法，capture为布尔类型，表示是否使用捕获过程，默认值为false。 代码示例：
<body style="width: 100%; height: 888px"> <script> const body = document.querySelector('body'); // 设置capture 为true， 则先执行window的监听事件，再执行body的监听事件 window.addEventListener('click', function(){console.log('window click!')}, true); body.addEventListener('click', function(){console.log('body click!')}); </script> </body>EventListener是事件监听器接口，用于对接到的事件具体执行处理。其中只有一个方法handleEvent(event)用于具体处理事件。EventListener接口在实际使用中就是一个包含Event参数的方法。
Event是事件接口，用来包含事件中的信息，例如事件所在的事件目标、事件类型。如果是单及事件，那么还会包含鼠标单击时的坐标信息等，事件监听器函数在处理事件时都会接收到一个Event参数。 Event是总的事件接口，DOM2中共有4种具体的事件类型，分别是UIEvents、MouseEvents、MutationEvents和HTMLEvents。可以使用DOMImplementation的hasFeature方法来判断浏览器是否支持某种类型事件，调用时第一个参数传入要检查的事件类型，第二个参数传入2.0就可以了。
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继承自Event接口，在Event接口的基础上增加了两个只读属性和一个方法属性。只读属性时view和detail，分别表示视图和详细信息，view为Views子标准中的AbstractView类型，在浏览器中一般就是window对象；detail为整数类型，表示事件的相关信息，所表示的内容跟具体事件相关。新增的方法为initEvent, 它在原来的initEvent方法上添加了两个自己的属性，它的作用是新建UIEvent类型的事件，调用语法如下：
event.initEvent(type, canBubble, cancelable, view, detail);表中是否可冒泡和是否可取消分别对应canBubble和cancelable两个属性。
MouseEvents事件对应MouseEvents接口。MouseEvent继承自UIEvent接口，它在UIEvent的基础上新增加了10个只读属性和一个方法属性。
MouseEvent接口中新增的方法为initMouseEvent，它在原来initUIEnent方法上将新增的10个属性加到参数中，它的作用是创建MouseEvent类型的事件，调用语法如下： event.initMouseEvent(type,canBubble,cancelable,view,detail,…);
MutationEvents事件对应MutationEvent接口。Mutation接口继承自Event接口，它在原来的基础上添加了5个只读属性、一个方法属性和3个常量属性。 ######5个只读属性
relatedNode: 相关节点prevValue： 之前的值newValue： 新值attrName：属性名attrChange： 属性变化类型HTMLEvents事件没有自己单独的接口，也就是说，它直接使用Event接口。HTMLEvents事件共有12种类型，如下：
Events子标准实在DOM2种才加入的。其实，在DOM标准发布之前浏览器种就已经可以使用事件了，此类型事件一般叫做DOM0级事件。 DOM0级事件是通过节点的属性来实现的，属性的名称为“on+事件名”的格式，其中，事件名的首字母不需要大写，例如，onclick、onload、onfocus等。DOM0级事件的添加有两种方式，一种是直接作为属性写在标签中，另一种是在脚本中通过节点对象的属性 来添加。 代码示例：
<body onload="listener(event);"> <div id='a'>excellib</div> <script> function listener(event){ console.log(event.type); } var div = document.getElementById('a'); div.onclick = listener; </script> </body>个人wx：iotzzh 前端公众hao：前端微说
