摘要：事件流描述的是從頁(yè)面中接受事件的順序。事件流中的事件流是事件冒泡流。順序是從外向里級(jí)事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段，其中到是處于目標(biāo)階段，如圖所示。添加的事件會(huì)被逆序執(zhí)行。

HTML和js之間的交互是通過(guò)事件實(shí)現(xiàn)的。

事件流描述的是從頁(yè)面中接受事件的順序。

IE中的事件流是事件冒泡流。順序是從里向外 eg：div-body-html-Document

Netscape Communicator的事件流是事件捕獲流。順序是從外向里 eg：Document-html-body-div

DOM2級(jí)事件規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段，其中3到4是處于目標(biāo)階段，如圖1所示。

1.HTML事件處理程序

通過(guò)html特性來(lái)指定處理事件

function show(){
  alert("hello world")
}

事件處理程序中的代碼在執(zhí)行時(shí)，有權(quán)訪問(wèn)全局作用域中的任何代碼
為什么會(huì)這樣呢？？？
通過(guò)html特性方式指定的事件處理程序會(huì)創(chuàng)建一個(gè)封裝這元素屬性值的函數(shù)，這個(gè)函數(shù)內(nèi)部可以像訪問(wèn)局部變量一樣訪問(wèn)document及鈣元素本身的成員，神不神奇？這個(gè)函數(shù)使用with擴(kuò)展自己的作用域：

function(){
    with(document){
      with(this){
        //元素屬性值
    }
  }
}

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

通過(guò)javaScript指定事件處理程序的傳統(tǒng)方式，將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?/p>

var btn=document.getElementById("myBtn")
btn.onclick=function(){
  alert(this.id)
}

刪除:

btn.onclick=null;

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

兩個(gè)方法，一個(gè)處理指定事件一個(gè)刪除，addEventListener()和removeEventListener()。這兩個(gè)方法分別接受三個(gè)參數(shù)：
（要處理的事件名、作為事件處理程序的函數(shù)、一個(gè)布爾值）true表示在捕獲階段調(diào)用函數(shù)，false表示在冒泡階段調(diào)用,一般使用false，這樣可以最大限度地兼容各種瀏覽器
通過(guò)addEventListener()添加的函數(shù)只能通過(guò)addEventListener()移除，所以，匿名函數(shù)無(wú)法移除

var btn=document.getElementById("myBtn")
btn.addEventListener("click",function(){
    alert(this.id)
},false)
btn.removeEventListener("click",function(){            //沒(méi)有用
    alert(this.id)
},false)

調(diào)用removeEventListener時(shí)與傳入addEventListener時(shí)的函數(shù)不同

var btn=document.getElementById("myBtn")
var handler(){
    alert(this.id)
}
btn.addEventListener("click",handler,false)
btn.removeEventListener("click",handler,false)

4.IE事件處理程序

與DOM中類似,兩個(gè)方法：attachEvent()和detachEvent()，接受兩個(gè)參數(shù)，同時(shí)由于IE8及更早版本只支持事件冒泡，所以通過(guò)這兩個(gè)方法添加的事件處理程序都會(huì)被添加到冒泡階段：
(事件處理程序名稱、事件處理程序函數(shù))

var btn=document.getElementById("myBtn")
btn.attachEvent("onclick",function(){
    alert(this===window)    //true
})

此處是onclick而不是click，與DOM方法不同的是這里的事件處理程序會(huì)在全局作用域中運(yùn)行，this等于window。添加的事件會(huì)被逆序執(zhí)行。

5.跨瀏覽器的事件處理程序

使用EventUtil對(duì)象，封裝如下：

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {   //DOM2級(jí)
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {    // IE
            element.attachEvent("on" + type, handler);
        } else {    //DOM0級(jí)
            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;
        }
    },
  }

使用如下：

var btn=document.getElementById("myBtn")
var handler=function(){
    alert(clicked)
}
EventUtil.addHandler(btn,"click",handler)
EventUtil.removeHandler(btn,"click",handler)

注：本篇文章內(nèi)容來(lái)自紅皮書(shū)