DOM事件

1.DOM事件的级别

DOM0:element.=function(){}，在html中属性上加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节点。
<div id="ev"> <style> #ev{ width: 300px; height: 100px; line-height: 100px; background-color: red; color: #FFF; text-align: center; } </style> 目标元素 </div> <script> //true为捕获时调用,顺序为window->document->html->body->ev，和定义的顺序无关，和响应的顺序有关。 //false为冒泡时调用(默认),顺序为ev->body->html->document->window var ev = document.getElementById("ev"); //定义
ev.addEventListener("click",function(){
console.log("ev captrue");
},true);
window.addEventListener("click",function(){
console.log("window captrue");
},true);
document.addEventListener("click",function(){
console.log("document captrue");
},true);
document.documentElement.addEventListener("click",function(){
console.log("html captrue");
},true);
document.body.addEventListener("click",function(){
console.log("body captrue");
},true);
//响应结果
//window captrue
//document captrue
//html captrue
//body captrue
//ev captrue
</script>

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.自定义事件

            
var eve = new Event('custome');//声明一个自定义事件，只能指定事件名
            ev.addEventListener('custome',function(){
                console.log('custome');
            });//ev指一个DOM对象
            //触发自定义事件
            setTimeout(function(){
                ev.dispatchEvent(eve);
            },1000);
            //CustomEvent，可以指定事件名，后边可以跟一个obj来做指定参数
    <p>var signin = new Event("event");//声明一个自定义事件，只能指定事件名</p>
    <div id="ev2">
         <style>
            #ev2{
                width: 300px;
                height: 100px;
                line-height: 100px;
                background-color: red;
                color: #FFF;
                text-align: center;                
            }
        </style>
        Event自定义事件            
    </div>  
    <p>var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });可以指定事件名，后边可以跟一个obj来做指定参数 </p>
     <div id="ev3">
         <style>
            #ev3{
                width: 300px;
                height: 100px;
                line-height: 100px;
                background-color: red;
                color: #FFF;
                text-align: center;                
            }
         </style>
        CustomEvent自定义事件            
    </div>
        var ev2 = document.getElementById("ev2");        
        var signin = new Event("event");
        ev2.addEventListener("event",function(){
            console.log("event dispatch");
        });
        setTimeout(function(){
            ev2.dispatchEvent(signin);//此处传入的是事件对象signin，而不是事件名event
        },1000);        
        var ev3 = document.getElementById("ev3");        
        var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });
        ev3.addEventListener("CustomEvent",function(e){
            console.log("CustomEvent dispatch");
            console.log(e);
            console.log(e.detail.name);
        });
        setTimeout(function(){
            ev3.dispatchEvent(signout);
        },1000);        
//输出结果
//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