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

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

html事件處理程序。缺點(diǎn)：html代碼和js代碼緊密耦合。

DOM0級(jí)事件處理程序。

DOM2級(jí)事件處理程序。

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

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

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

IE事件處理程序

attachEvent（）添加事件， detachEvent（）刪除事件
接收相同的兩個(gè)參數(shù)：事件處理程序的名稱和時(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;
                }
            }
            //獲取事件對(duì)象
            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;
                }
            },
            //阻止事件默認(rèn)行為
            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上的事件都會(huì)產(chǎn)生一個(gè)對(duì)象。
事件對(duì)象event

DOM中的事件對(duì)象。

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

2.IE中的事件對(duì)象

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

鼠標(biāo)事件
MouseEvent對(duì)象

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

觸發(fā)順序

//一個(gè)窗口拖動(dòng)的例子
//封裝一個(gè)獲取元素的方法，防止出現(xiàn)IE不兼容等問(wèn)題
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;


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

}

//在頁(yè)面中移動(dòng)
//釋放鼠標(biāo)時(shí)停止移動(dòng)
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";
    }
    //釋放鼠標(biāo)
    document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup - null;
    }

}

鍵盤事件

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

例子
//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"){/*判斷目標(biāo)事件是否為li*/
         alert(e.target.innerHTML);
       }
     },false);
}

為父節(jié)點(diǎn)添加一個(gè)click事件，當(dāng)子節(jié)點(diǎn)被點(diǎn)擊的時(shí)候，click事件會(huì)從子節(jié)點(diǎn)開(kāi)始向上冒泡。父節(jié)點(diǎn)捕獲到事件之后，通過(guò)判斷e.target.nodeName來(lái)判斷是否為我們需要處理的節(jié)點(diǎn)。并且通過(guò)e.target拿到了被點(diǎn)擊的Li節(jié)點(diǎn)。從而可以獲取到相應(yīng)的信息，并作處理