1.DOM事件的级别
DOM0:element.onclick=function(){}，在html中onclick属性上加js语句；
DOM2:element.addEventListener('click',function(){},false)， 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用(默认)；
DOM3:element.addEventListener('keyup',function(){},false)，事件类型增加了很多，例如：鼠标事件，键盘事件等等。
2.DOM事件模型（原理）
指的就是捕获（从上到下，true），冒泡（从当前元素向上，false）。
3.DOM事件流
三个阶段，1事件捕获阶段，2目标阶段，3事件冒泡阶段。
4.DOM事件的捕获流程
捕获的具体流程：window->document->html标签->body->..父->子..->目标元素。
反之，为冒泡流程。
小补充：
document.documentElement是文档对象根节点(html)的引用，
document.body是DOM中Document对象里的body节点。
目标元素
5.Event对象的常见应用
- 1.DOM事件原理（冒泡，捕获，及流程）；
- 2.注册事件（监听用户的交互行为）；
- 3.做响应的时候Event对象非常重要。
0.event获取鼠标值（ pageX=event.clientX+document.documentElement.scrollTop||document.body.scrollTop;）图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别，键盘值（event.keyCode）。JS-事件类型（鼠标事件中event对象的独有属性）
1.event.preventDefault()，阻止默认事件，例如对a标签阻止跳转。
2.event.stopPropagation()，阻止冒泡事件，单击子元素响应事件a，单击父元素响应事件b，当单击a时阻止事件b的响应。
3.event.stopImmediatePropagation()，事件响应优先级，当一个按钮中同时绑定事件a和事件b,那么在a的响应事件中加入此句话，将会阻止事件b的执行。
4.event.currentTarget()，当前所绑定事件对象，即父元素 。（经常考察，eg:一个for循环，给一个DOM注册了n多个事件，怎么优化？）事件代理，把子元素的事件代理都转移到父元素上，在父元素上绑定一次事件就可以了，当响应的时候就要区分当前是哪个元素被点击。
5.event.target()，当前被点击的子元素，一个父元素下有十个子元素，只需要在父元素上绑定一次事件即可，需判断是哪个子元素被点击了（经常考察，与4一起）。
6.事件代理
原理：
- 通过事件冒泡机制；
- 在上层节点绑定事件，通过 e.target 获取真实点击的元素
var div1 = document.getElementById('div1');
div1.addEventListener('click',function(e){
var target = e.target; //实际点击的a标签
if(target.nodeName === 'A'){
alert(target.innerHTML);
}
});
//封装一个通用的事件监听函数
function bindEvent(elem,type,selector,fn){
if(fn === null){
fn = selector;
selector = null;
}
elem.addEventListener(type,function(e){
var target ;
if(selector){
//代理
target = e.target;
if(target.matches(selector)){
fn.call(target,e);//将target赋给this
}
}else{
//不是代理
fn(e);
}
});
}
//调用
bindEvent(div1,'click','a',function(e){
e.preventDefault();
console.log(this.innerHTML);//注意：此处为this
});
bindEvent(div1,'click',function(e){
console.log(p1.innerHTML);
});7.自定义事件
var eve = new Event('custome');//声明一个自定义事件，只能指定事件名
ev.addEventListener('custome',function(){
console.log('custome');
});//ev指一个DOM对象
//触发自定义事件
setTimeout(function(){
ev.dispatchEvent(eve);
},1000);
//CustomEvent，可以指定事件名，后边可以跟一个obj来做指定参数自定义事件
var signin = new Event("event");//声明一个自定义事件，只能指定事件名
Event自定义事件
var signout = new CustomEvent("CustomEvent",{
detail:{
name:"ld",sex:"female"
}
});可以指定事件名，后边可以跟一个obj来做指定参数
CustomEvent自定义事件
//输出结果
//event dispatch
//CustomEvent dispatch
//CustomEvent {isTrusted: false, detail: {…}, type: "CustomEvent", target: div#ev3, currentTarget: div#ev3, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falsedetail: {name: "ld", sex: "female"}eventPhase: 0isTrusted: falsepath: (5) [div#ev3, body, html, document, Window]returnValue: truesrcElement: div#ev3target: div#ev3timeStamp: 37.19999999884749type: "CustomEvent"__proto__: CustomEvent
//ld