W3C标准

w3c是定义HTML、XML表现行为，以及事件交互API标准。

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

DOM事件(交互或脚本触发)：
EventTarget 是一个 DOM 接口，可以监听事件、触发事件。
该接口有三个方法：

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

Elements，document， Window是最常见的 event targets ，但是其他对象也可以作为 event targets，比如 XMLHttpRequest、AudioNode等。

常见DOM事件：

* 用户界面事件：当用户与页面的上的元素交互时发生，但不一定与用户操作有关的事件。   
load事件：当页面加载完毕时在window上触发，当图像加载完毕时在ing元素上触发，等等，页面完全加载完毕（包括所有图像，js文件，css等外部文件资源）时触发，img只要设置了src就会下载   
unload事件：当页面完全卸载时在window上触发，等等。当一个页面切换到另一个页面时就会触发，经常利用这个事件来清除引用，减少内存的泄露    
error：当发生js错误时在window上触发，当图像无法加载时在img上触发     
abort事件：当用户停止下载过程时，如果嵌入的内容没有加载完成，则在object元素上触发    
select：当用户选择文本框（input或textarea）中的一或多个字符时触发    
resize：当窗口或框架的大小发生改变时在window上触发     
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发   

* 焦点事件：当元素获得焦点或失去焦点时触发    
blur：失去焦点时触发，这个事件不会冒泡   
focus：获得焦点时触发，不冒泡   
focusin：在获得焦点时触发，但他冒泡，DOM3新增   
focusout：在失去焦点时触发，冒泡 

* 鼠标事件：当用户通过鼠标在页面上执行操作时触发   
click：单击事件，用户单机鼠标按钮（一般是左键）或按下回车键时触发   
dbclick：双击事件，当双击鼠标时触发（一般是左键）   
mousedown：当用户在按下任意鼠标按钮时触发     
mouseup：当用户释放鼠标按钮时触发   
mouseenter：在鼠标光标从外部首次（是指每次进入元素，并不是只执行一次）时触发，而且这个事件不冒泡，而且在光标移到到后代元素上不会触发（从父区域进入子区域，再从子区域进入父区域是不会触发的，因为他认为子区域也是他的一部分）    
mouseleave：鼠标离开和mouseenter：鼠标进入是一对，刚好相反   
mousemove：当鼠标指针在元素内部移时重复的触发   
mouseout：当鼠标指针位于一个元素上方，然后移到到另一个元素上方时触发，另一个元素可能是外部元素也可能是他的后代元素，因为他不认为后代元素所在的区域是他的一部分   
mouseover：鼠标指针进入和mouseout 鼠标指针离开是一对，恰好相反   
除了mouseleave和mouseenter之外都会冒泡   
  
click事件只有触发了mousedown和mouseup之后才会触发，代表click只有触发两次clic才会触发，如果取消了之前的事件将会不触发   
鼠标事件都是在浏览器视口中的特定位置发生的，可以通过事件的属性获取到。    

* 坐标位置：  
视口区（客户区）坐标位置：clientX和clientY可以获取到位置信息。所有浏览器都支持这两个属性，是相对于浏览器的视口而不是页面而言的，不包括地址栏等   
页面坐标位置：pageX和pageY，相对于页面而言，ie8及更早版本不支持这两个属性，不过我们可以计算出来   
event.clientX+（document.body.scrollLeft + document.documentElement.scrollLeft）   
event.clientY + （document.body.scrollTop + document.documentElement.scrollTop）   
屏幕坐标位置：相对于整个电脑屏幕，screenX和screenY   

* 滚轮事件：当使用鼠标滚轮（或类似事件）时触发   
mousewheel：跟踪鼠标滚轮或笔记本触摸板   
 
* 文本事件：当在文档中输入时触发  
textinput：在文本显示给用户之前更容易拦截文本，是对keypress的补充   
可编辑区输入字符键才可以出发   
ie9才支持，firefox不支持   
  
* 键盘事件：当用户通过键盘在页面上执行操作时触发  
keydown：用户按下键盘上的任意键时触发，而且按住不放的话，会重复触发此事件   
keypress：用户按下键盘上的字符键时触发，而且按住不放的话，会重复触发此事件，按下esc也会触发   
keyup：用户释放键盘上的键时触发   
所有元素都支持这三个事件   
keydown-》keypress-》textinput-》keyup  
keyup和keydown的event有个keycoe属性，代表键盘码，与ASCII相对应    

* 移动端-小程序事件：   
touchstart: 当手指触摸屏幕的时候出发   
touchmove： 当手指在屏幕移动的时候   
touchend： 手指离开屏幕的时候触发   
touchcancel: 当被迫中止滑动的时候触发（弹消息，来电等等）；   
tap：手指触摸后离开(点击)   
longtap: 手指触摸后后，超过350ms离开   
事件绑定的写法同组件的属性，以 key、value 的形式。   
key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart

自定义事件(手动触发)：
继承EventTarget接口，对象就成为了EventTarget，同样可以监听事件、触发事件。
我们可以通过创建Event对象和CustomEvent对象来创建自定义对象。

Event接口表示在 DOM 中出现的事件： InputEvent，MouseEvent...都是基于Event的。
var ev = new Event('build', { bubbles:true,cancelable:true,composed:true })
var ele = document.getElementById("btn");
ele.addEventListener("build", function(){
    alert("build")
}, false)
ele.dispatchEvent(ev)

CustomEvent接口从父接口Event继承属性：
var ev = new CustomeEvent('build', { details: {
  name: 'lili', age: 99
}, bubbles:true,cancelable:true,composed:true })
var ele = document.getElementById("btn");
ele.addEventListener("build", function(e){
    alert(e.name + e.age)
}, false)
ele.dispatchEvent(ev)

温馨提示：上面说到了可以使用脚本去触发一个事件的发生，那如果要区分这个事件是用户真实触发还是脚本触发该怎么办呢？可以使用event对象下的 isTrusted 属性。event.isTrusted：用户触发的事件返回true，脚本触发的返回false。