1，事件流：從頁面中接受事件的順序

• IE：事件冒泡（即事件由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接受娘摔，然后逐級向上傳遞至最不具體的那個節(jié)點（文檔）---由內而外 ）
• N：事件捕獲流（不太具體的那個節(jié)點先接受到事件碰煌，而最具體的節(jié)點最后收到---由外而內）

PS:（兩個完全相反的概念）

    <p>事件流</p>
    <div id="box">
        <input type="button" value="按鈕1" id="btn1">
        <input type="button" value="按鈕2" id="btn2">
        <input type="button" value="按鈕3" id="btn3">
        <a href="index2.html" id="go">preventDefault()</a>
    </div>

2太雨，事件處理程序

（1）html事件處理程序：寫在標簽里
onclick='alert(123)' onclick = 'showClick()'
（2）DOM 0級處理程序 （優(yōu)勢：跨瀏覽器蕊退，可以一個元素綁定多個程序）

//綁定
      var btn1 = document.getElementById('btn1');
      btn1.onclick=function(){
            alert(1)
        }
//刪除
  btn1.onclick=null;

（3）DOM 2級事件處理程序 （優(yōu)勢：可以綁定多個）--- IE不生效
PS：定義了兩個方法：用于處理指定和刪除事件處理程序的操作
addEventListener() , removeEventListener()
接收三個參數(shù)：要處理的事件名验夯，作為事件處理程序的函數(shù)猖吴，布爾值（true：捕獲階段；false：冒泡階段）

       function showAlert(){
            alert('btn3')
        }
        var btn3 = document.getElementById('btn3');
      //綁定
        btn3.addEventListener('click',showAlert,false);
        btn3.addEventListener('click',function(){
            alert('hello')
        },false)

      //移除
     btn3.removeEventListener('click',showAlert,false);

；幼：１巍！注意：事件名稱不加on; 移除時參數(shù)必須相同绑谣。

（4）IE事件處理程序
attachEvent()添加党窜， detachEvent()移除
接受兩個相同的參數(shù)：事件處理程序的名稱，事件處理程序的函數(shù)

        var btn2 = document.getElementById('btn2');
        btn2.attachEvent('onclick',showAlert);
        btn2.detachEvent('onclick',showAlert);

將2中的方法封裝到一個對象中（解決跨瀏覽器問題）

   var eventUntil = {
        //添加句柄
        addHandler:function(element,type,handler){
            if(element.addEventListener){ //支持DOM 2級
                element.addEventListener(type,handler,false)
            }else if(element.attachEvent){//支持IE
                element.attachEvent('on'+type,handler)
            }else{//DOM 0級
                element['on'+type]=handler
            }
        },
        //刪除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false)
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler)
            }else{
                element['on'+type] = null
            }
        },
       getEvent:function(event){
            return event?event:window.event
        },
        getType:function(event){
            return event.type;
        },
        getElement:function(event){
            return event.target || event.srcElement;
        },
        //阻止默認事件
        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault()
            }else if(event.returnValue){
                event.returnValue = false;
            }
        },
        //阻止冒泡
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else if(event.cancleBubble){
                event.cancleBubble = true;
            }
        }
    }
    //使用
    eventUntil.addHandler(btn3,'click',showAlert);
    eventUntil.removeHandler(btn3,'click',showAlert);

    var go = document.getElementById('go');
    eventUntil.addHandler(go,'click',function(e){
        e = e || window.event;
        // e = eventUntil.getEvent(e);
        console.log(eventUntil.getElement(e).nodeName)
        eventUntil.preventDefault(e)
        eventUntil.stopPropagation(e)
    })

3借宵，事件對象event ： 在觸發(fā)DOM上的事件時都會產生一個對象

event = event || window.event;

（1）DOM中的事件對象
參數(shù)：event\e

 function eventFun(event){
    alert(event.type)
}

常用的屬性：

• type屬性：用于獲取事件類型
• target屬性： 用于獲取事件目標（eg：target.nodeName）
• stopPropagation()方法：阻止事件冒泡
• preventDefault()方法： 阻止事件的默認行為

（2）IE中的事件對象
常用屬性：

• type：事件類型
• srcElement屬性：獲取事件目標
• cancelBubble屬性：用于阻止事件冒泡（true：阻止冒泡幌衣；false：不阻止）
• returnValue屬性： 阻止事件的默認行為（false）

4，不同的事件類型

（1）鼠標事件
onmousedown
onmousemove
onmouseup