前面的話

　　事件處理程式又叫事件偵聽器，實際上就是事件的繫結函式。事件發生時會執行函式中相應程式碼。事件處理程式有HTML事件處理程式、DOM0級事件處理程式、DOM2級事件處理程式和IE事件處理程式四類，下面將詳細介紹該部分內容

HTML事件處理程式

　　某個元素支援的每種事件，都可以使用一個與相應事件處理程式同名的HTML特性來指定。這個特性的值應該是能夠執行的javascript程式碼

　　在事件處理程式函式內部，this值等於事件的目標元素

<div id="box" style="height:30px;width:200px;background-color:pink;"
 
onclick = "this.innerHTML+= '1';"></div>

　　在HTML中定義的事件處理程式也可以呼叫在頁面其他地方定義的指令碼

<div id="box" style="height:30px;width:200px;background-color:pink;"onclick = "test()"></div>
<script>
    function test(){box.innerHTML+= '1';}    
</script>

　　HTML事件處理程式會建立一個封裝著元素屬性值的函式。這個函式中有一個區域性變數event，也就是事件物件。通過event變數，可以直接訪問事件物件，不用自己定義它，也不用從函式的引數列表中獲取

<div id="box" style="height:30px;width:200px;background-color:pink;"onclick = "this.innerHTML+= event.type;"></div>

　　在事件處理程式函式內部，可以像訪問區域性變數一樣訪問document及該元素本身的成員。如此一來，事件處理程式要訪問自己的屬性就簡單多了

<button id="box" value="test" style="height:30px;width:200px;background-color:pink;"onclick = "this.innerHTML+= value;"
 
></button>

【擴充套件】

　　下列這種情況輸出的是空字串''，如果與預想結果不一致，請移步至此

<script>
var value=123;
</script>
<button style="height:30px;width:200px;background-color:pink;"onclick = "this.innerHTML+= value;"></button>

缺點

【1】時差問題

　　因為使用者可能會有HTML元素一出現在頁面上時就觸發相應的事件，但當時的事件處理程式有可能尚不具備執行條件，就會報錯

<button style="height:30px;width:200px;background-color:pink;"onclick = "this.innerHTML+= val;"></button>
<script src="http://www.qq.com/test.js"></script>
<script>
var val=123;
</script>

【2】耦合問題

　　 客戶端程式設計的通用風格是保持HTML內容和javaScript行為分離，所以應該避免使用HTML事件處理程式屬性，因為這些屬性直接混合了javascript和HTML，且不易擴充套件

DOM0級事件處理程式

　　通過javascript指定事件處理程式的傳統方式，就是將一個函式賦值給一個事件處理程式屬性。這種為事件處理程式賦值的方法是在第四代Web瀏覽器中出現的，而且至今仍然為所有現代瀏覽器所支援。原因一是簡單，二是具有跨瀏覽器的優勢

　　每個元素都有自己的事件處理程式屬性，這些屬性通常全部小寫，將這種屬性的值設定為一個函式，就可以指定事件處理程式

　　[注意]以DOM0級方式新增的事件處理程式會在事件流的冒泡階段被處理

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
box.onclick = function(){this.innerHTML += '1';}    
</script>    

　　可以通過將事件處理程式屬性設定為null來刪除事件處理程式

box.onclick = null;

缺點

　　DOM0級事件處理程式的缺點是圍繞著每個事件目標對於每種事件型別只能新增一個事件處理程式

DOM2級事件處理程式

　　DOM2級事件處理程式定義了兩個方法用於處理指定和刪除事件處理程式的操作：addEventListener()和removeEventListener()

　　所有DOM節點中都包含這兩個方法，並且它們都接受3個引數：要處理的事件名、作為事件處理程式的函式和一個布林值。最後的布林值引數如果是true，表示在捕獲階段呼叫事件處理程式；如果是false，表示在冒泡階段呼叫事件處理程式。若最後的布林值不填寫，則和false效果一樣

　　[注意]IE8-瀏覽器不支援DOM2級事件處理程式

　　使用DOM2級事件處理程式的好處是可以新增多個事件處理程式，並按照他們新增的順序觸發

　　以下程式碼以1-2的順序輸出

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
box.addEventListener('click',function(){this.innerHTML += '1'},false);
box.addEventListener('click',function(){this.innerHTML += '2'},false);    
</script>    

　　以下程式碼以2-1的順序輸出

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
setTimeout(function(){
box.addEventListener('click',function(){this.innerHTML += '1'},false);    
},16);
box.addEventListener('click',function(){this.innerHTML += '2'},false);    
</script>

引數

　　如果希望向監聽函式傳遞引數，可以用匿名函式包裝一下監聽函式

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
box.addEventListener("click",function(){
    test('123');
},false);
function test(x){box.innerHTML += x;}
</script>

移除

　　通過addEventListener()新增的事件處理程式只能使用removeEventListener()來移除，移除時傳入的引數與新增處理程式時使用的引數相同。這意味著，addEventListener()新增的匿名函式將無法移除　　

　　以下無效

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
box.addEventListener("click",function(){
    this.innerHTML += '1'
},false);
box.removeEventListener('click',function(){
    this.innerHTML += '1'
},false);    
</script>

　　以下有效

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
var handle = function(){this.innerHTML += '1'};
box.addEventListener("click",handle,false);
box.removeEventListener('click',handle,false);    
</script>

IE事件處理程式

　　IE實現了與DOM中類似的兩個方法：attachEvent()和detachEvent()。這兩個方法接受相同的兩個引數：事件處理程式名稱與事件處理程式函式。由於IE8-瀏覽器只支援事件冒泡，所以通過attachEvent()新增的事件處理程式都會被新增到事件冒泡階段

　　attachEvent()方法的第一個引數是"onclick"，而非DOM的addEventListener()方法中的"click"

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
box.attachEvent('onclick',function(){this.innerHTML += '1';});
</script>

 　　[注意]attachEvent()方法只冒泡到document，且IE10-瀏覽器支援

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<button id="reset">還原</button>
<script>
//IE10-瀏覽器返回div body html document
//其他瀏覽器報錯
reset.onclick = function(){history.go();}
box.attachEvent('onclick',function(){box.innerHTML += 'div\n';});
document.body.attachEvent('onclick',function(){box.innerHTML += 'body\n';});
document.documentElement.attachEvent('onclick',function(){box.innerHTML += 'html\n';});
document.attachEvent('onclick',function(){box.innerHTML += 'document\n';});
window.attachEvent('onclick',function(){box.innerHTML += 'window\n';});
</script>    

this

　　與其他三個事件處理程式不同，IE事件處理程式的this指向window，而非被繫結事件的元素

<!-- <div> -->
<div id="box" style="height:100px;width:300px;background-color:pink;"
onclick = "console.log(this)"></div>

<div id="box" style="height:100px;width:300px;background-color:pink;"></div>
<script>
box.onclick= function(){
    console.log(this);//<div>
}
</script>

<div id="box" style="height:100px;width:300px;background-color:pink;"></div>
<script>
box.addEventListener('click',function(){
    console.log(this);//<div>
});
</script>

<div id="box" style="height:100px;width:300px;background-color:pink;"></div>
<script>
box.attachEvent('onclick',function(){
    console.log(this);//window
});
</script>

順序

　　使用attachEvent()方法新增的事件處理程式的觸發順序是有區別的。IE9、10瀏覽器是按正序執行的，而IE8-瀏覽器則是按倒序執行的　　

<div id="box" style="height:30px;width:100px;background-color:pink;"></div>
<script>
box.attachEvent('onclick',function(){
    box.innerHTML += '1';
});
box.attachEvent('onclick',function(){
    box.innerHTML += '2';
});
</script>

移除

　　使用attachEvent()新增的事件可以通過detachEvent()來移除，條件是必須提供相同的引數。與DOM方法一樣，這也意味著新增的匿名函式將不能被移除。不過，只要能夠將對相同函式的引用傳給detachEvent()，就可以移除相應的事件處理程式　　

　　以下無效

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
box.attachEvent("onclick",function(){
    box.innerHTML += '1'
},false);
box.detachEvent('onclick',function(){
    box.innerHTML += '1'
},false);    
</script>

　　以下有效

<div id="box" style="height:30px;width:200px;background-color:pink;"></div>
<script>
var handle = function(){box.innerHTML += '1'};
box.attachEvent("onclick",handle,false);
box.detachEvent('onclick',handle,false);    
</script>    

總結

　　由於IE8-瀏覽器不支援addEventListener()方法，所以需要配合attachEvent()方法來實現全瀏覽器的事件繫結相容寫法。同時，由於attachEvent()方法中的this指向window，所以需要對this進行顯式修改

function addEvent(target,type,handler){
    if(target.addEventListener){
        target.addEventListener(type,handler,false);
    }else{
        target.attachEvent('on'+type,function(event){
            return handler.call(target,event);
        });
    }
}

呼叫順序

　　如果瀏覽器同時出現這四種事件處理程式，那麼它們的呼叫順序在各瀏覽器中表現並不一致　

<div id="box" style="height:100px;width:100px;background:pink;" onclick = "this.innerHTML +='html\n'"></div>
<script>
if(box.addEventListener){
    box.addEventListener('click',function(){this.innerHTML += 'DOM2級\n'})
}    
if(box.attachEvent){
    box.attachEvent('onclick',function(){box.innerHTML +='IE\n'})
}
box.onclick = function(){
    this.innerHTML += 'DOM0級\n';
}
</script>

【相同點】

　　如果同時出現HTML事件處理程式和DOM0級事件處理程式，DOM0級會覆蓋HTML事件處理程式

【不同點】

　　chrome/opera/safari等webkit核心的瀏覽器會按照事件處理程式出現的順序來排列，所以結果為：DOM2級 DOM0級

　　firefox瀏覽器和IE瀏覽器會將DOM0級事件優先呼叫

　　所以firefox和IE11瀏覽器結果為：DOM0級 DOM2級

　　IE9、10瀏覽器結果為：DOM0級 DOM2級 IE

　　IE8-瀏覽器結果為：DOM0級 IE