事件流
严格来说，上图还少了一个层级window，在顶层。
DOM2级 与 DOM0级相比
1、可以绑定多个监听函数，而DOM0级只能绑定一个监听函数。
2、提供了移除的方法，但对于匿名函数无效。
3、可以控制捕获还是冒泡，DOM0级只有冒泡。
事件对象e的常用属性方法
e.stopImmediatePropagation()如果注册了多个监听函数，则一并阻止冒泡。
e.currentTarget 绑定时间的对象，始终与this相同。
e.target 触发事件的是哪个元素，就显示哪个元素对象。
mouseenter/mouseleave与mouseover/mouseout的区别
1、mouseenter/mouseleave把冒泡机制阻止了。
2、mouseenter/mouseleave运用了relatedTarget属性（e.relatedTarget既不是目标元素，也不是目标元素的子元素)。
e.target与e.relatedTarget常用事件
事件名称 target属性 relatedTarget属性
focusin 接受焦点的节点 丧失焦点的节点
focusout 丧失焦点的节点 接受焦点的节点
mouseenter 将要进入的节点 将要离开的节点
mouseleave 将要离开的节点 将要进入的节点
mouseout 将要离开的节点 将要进入的节点
mouseover 将要进入的节点 将要离开的节点
dragenter 将要进入的节点 将要离开的节点
dragexit 将要离开的节点 将要进入的节点
自定义事件
自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。
Event()
最简单的就是使用Event()构造函数。
CustomEvent()
如果需要在触发事件的同时，传入指定的数据，需要使用CustomEvent构造函数生成自定义的事件对象。
用this.dispatchEvent(customEvent(this))触发。
异步类型
一般而言，异步任务有以下三种类型：
1、普通事件，如click、resize等
2、资源加载，如load、error等
3、定时器，包括setInterval、setTimeout等
同步变异步是性能优化的手段之一，如利用定时器对数组进行分块。
事件对象e的坐标位置
clientX/Y与x/y
clientX/Y表示鼠标指针在可视区域中的水平和垂直坐标。
screenX/Y
screenX/Y表示鼠标指针相对于屏幕的水平和垂直坐标
PageX/Y与layerX/Y
pageX/Y表示相对于页面的水平和垂直坐标，它与clientX/clientY的区别是不随滚动条的位置变化。
offsetX/Y
offsetX/Y表示相对于定位父级的水平和垂直坐标。
当页面无定位元素时，body是元素的定位父级。由于body的默认margin是8px，所以offsetX/Y与clientX/Y差(8,8)。
时间间隔
系统为了防止按键误被连续按下，所以在第一次触发keydown事件后，有500ms的延迟，才会触发第二次keydown事件。
[注意]类似的，keypress事件也存在500ms的时间间隔。
顺序
如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下
1、keydown 2、keypress 3、keydown 4、keypress 5、（重复以上过程） 6、keyup。
变动事件mutation
7个变动事件，浏览器兼容性都不是太好。说的过得去就是DOMNodeInserted、DOMNodeRemoved和DOMSubtreeModified这三个事件，不兼容IE8-浏览器。
剪贴板操作包括剪切(cut)、复制(copy)和粘贴(paste)这三个操作，快捷键分别是ctrl+x、ctrl+c、ctrl+v。当然也可以使用鼠标右键菜单进行操作。
如果DOM结构发生变化，触发的是变动事件，如果文本框中的文本发生变化，触发的是文本事件。
change
说起文本变化，最先想到的可能就是change事件。
对于和