摘要：不加入布爾值的原因是只支持事件冒泡跨瀏覽器解決添加事件移除事件獲取事件對象阻止事件冒泡阻止事件默認行為事件對象在觸發(fā)上的事件都會產(chǎn)生一個對象。

事件流——描述的是從頁面中接受事件的順序。
事件冒泡：由具體的元素接收逐級傳遞到最不具體的那一個節(jié)點。
事件捕獲:由不太具體的節(jié)點應該更早接收到事件，而最具體的節(jié)點最后接收到事件

html事件處理程序。缺點：html代碼和js代碼緊密耦合。

DOM0級事件處理程序。

DOM2級事件處理程序。

DOM2級事件處理程序定義了兩個方法：用于處理指定和刪除事件處理程序。
addEventListener（）和removeEventListener（）

接收三個參數(shù)：要處理的事件名，作為事件處理程序的函數(shù)和布爾值

//btn3.addEventListener("click",message,false);  

IE事件處理程序

attachEvent（）添加事件， detachEvent（）刪除事件
接收相同的兩個參數(shù)：事件處理程序的名稱和時間處理程序的函數(shù)。不加入布爾值的原因是IE8只支持事件冒泡

跨瀏覽器解決

var eventUtil = {
            //添加事件
            addHandler:function(element, type, handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                }
                else if(element.attachEvent){
                    element.attachEvent("on"+type,handler);
                }
                else{
                    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] = handler;
                }
            }
            //獲取事件對象
            getEvent:function(event){
                return event?event:window.event;
            },
            getType:function(event){
                return event.type;
            },
            getTarget:function(event){
                if(event.target){
                    return event.target;
                }
                else{
                    return event.srcElement;
                }
            },
            //阻止事件冒泡
            getStopPropagetion:function(event){
                if(event.stopPropagation){
                    return event.stopPropagation();
                }
                else{
                    return event.cancelBubble=true;
                }
            },
            //阻止事件默認行為
            getPreventDefault:function(event){
                if(event.preventDefault){
                    return event.preventDefault();
                }
                else{
                    return event.returnValue=false;
                }
            }
        }
        eventUtil.addHandler(btn3,"click", message);
        eventUtil.removeHandler(btn3,"click", message);   

在觸發(fā)DOM上的事件都會產(chǎn)生一個對象。
事件對象event

DOM中的事件對象。

（1）type屬性，獲取事件類型。event.type
（2）target屬性，獲取事件目標。
（3）stopPropagation（）方法，用于阻止事件冒泡。
（4）preventDefault（）方法，阻止事件的默認行為。

2.IE中的事件對象

（1）type屬性，獲取事件對象
（2）srcElement屬性，獲取事件對象
（3）cancelBubble=true方法，用于阻止事件冒泡
（4）returnValue=false ，阻止事件的默認行為。

鼠標事件
MouseEvent對象

屬性 //鼠標事件發(fā)生時，鼠標的位置
    -clientX,clientY //和頁面的距離
    -screntX,screntY //和屏幕的距離
    -ctrlKey,shiftKey,altKey,metaKey //當事件觸發(fā)是，鍵盤是按下的，則為true
    -button(0,1,2) 

觸發(fā)順序

//一個窗口拖動的例子
//封裝一個獲取元素的方法，防止出現(xiàn)IE不兼容等問題
function getByClass(clsName,parent){
    var oParent = parent? document.getElementById(parent):document,
    eles = [],
    elements = oParent.getElementsByTagName("*");

    for(var i = 0, l = elements.length; i < l; i++){
        if(elements[i].className == clsName){
            eles.push(elements[i]);
        }
    }
    return eles;
}

window.onload = drag;


//在標題區(qū)按下
function drag(){
    var oTitile = getByClass("login_logo_webqq","loginPanel")[0];
    //移動
    oTitile.onmousedown = fnDown;
    //關閉窗口
    var oClose = document.getElementById("ui_boxyClose");
    oClose.onclick = function(){
        document.getElementById("loginPanel").style.display="none";
    }

}

//在頁面中移動
//釋放鼠標時停止移動
function fnDown(){
    var oDrag =  document.getElementById("loginPanel");

    document.onmousemove = function(event){
        event = event || window.event;//瀏覽器兼容
        oDrag.style.left = event.clientX + "px";
        oDrag.style.top = event.clientY + "px";
    }
    //釋放鼠標
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup - null;
    }

}

鍵盤事件

事件代理在JS世界中一個非常有用也很有趣的功能。當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節(jié)點而將事件委托給父節(jié)點來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機制

例子
//html

  
item1
  
item2
  
item3
  
item4

//js
window.onload=function(){
  var ulNode=document.getElementById("list");
  ulNode.addEventListener("click",function(e){
       if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判斷目標事件是否為li*/
         alert(e.target.innerHTML);
       }
     },false);
}

為父節(jié)點添加一個click事件，當子節(jié)點被點擊的時候，click事件會從子節(jié)點開始向上冒泡。父節(jié)點捕獲到事件之后，通過判斷e.target.nodeName來判斷是否為我們需要處理的節(jié)點。并且通過e.target拿到了被點擊的Li節(jié)點。從而可以獲取到相應的信息，并作處理