1、DOM中的事件级别
DOM0: element.onclick = function(){}
DOM1: 没有与事件相关的设计
DOM2: element.addEventListener('click',function(){},false/true);冒泡/捕获，默认冒泡
DOM3：element.addEventListener('keyup',function(){},false/true);多事件类型
2、DOM事件模型：捕获 冒泡
3、事件流
阶段一：捕获阶段
阶段二：目标阶段
阶段三：冒泡阶段
4、描述DOM事件具体流程
捕获：window document HTML body div ... 目标元素
冒泡：相反
// 捕获 过程，冒泡把true改成false
var ev = document.getElementById('ev');
window.addEventListener('click', function() {
console.log("window capture");
}, true);
document.addEventListener('click', function() {
console.log("document capture");
}, true);
document.documentElement.addEventListener('click', function() {
console.log("html capture");
}, true);
document.body.addEventListener('click', function() {
console.log("body capture");
}, true);
ev.addEventListener('click', function() {
console.log("ev capture");
}, true);
注意：获取html标签是：document.documentElement
5、event对象的常见应用
event.preventDefault();//阻止默认事件
event.stopPropagation();//阻止事件冒泡
event.stopImmediatePropagation();//事件响应优先级
event.currentTarget();//当前所绑定的事件的对象
event.target();//事件委托，判断哪个被绑定
6、自定义事件
// 自定义事件
var eve = new Event('test');
ev.addEventListener('test', function() {
console.log("test dispatch");
});
setTimeout(function() {
ev.dispatchEvent(eve);
}, 2000)