**
網頁設計中不同類型的事件處理程序
**
1.HTML 事件處理程序：
-
先看例子(添加事件處理程序)：
<script type="text/javascript"> function show(){ alert("Hello world!"); } </script> <div id="box" onclick = "show()"></div> -
注（ 優點 ）：事件處理程序中的代碼在執行時，有權訪問全局作用域中的任何代碼；HTML事件處理程序更方便訪問自身的屬性值，例如：
<!--彈出id值--> <div id="box" onclick = "alert(this.id)"></div> -
缺點：HTML與JavaScript代碼緊密耦合，不利於代碼的可複用性，修改起來耗時、耗力，一旦修改任何一處，另外一處也必將改動；（該事件處理程序現在已經很少有人在用，可以說是被摒棄啦！）
2.DOM0 級事件處理程序：
-
先看例子(添加事件處理程序)：
var btn = document.getElementById("btn"); btn.onclick = function(){ // 要執行的代碼塊; alert(this.id); } -
移除事件處理程序：
btn.onclick = null； // 設置它的值爲空即可； -
優點 ：
1.操作簡單，容易理解；
2.具有跨瀏覽器的優勢，它爲所有現代瀏覽器支持； -
缺點：只可以添加一個事件處理程序，添加多個二級事件處理程序請看DOM2 級事件處理程序和IE事件處理程序；
3.DOM2級 事件處理程序（可以包含多個事件，按順序執行）：
-
先看例子(添加事件處理程序)：
var btn = document.getElementById("btn"); btn.addEventListener("click",function(){ // 要執行的代碼塊； alert(this.id); }，false ); btn.addEventListener("click",function(){ // 要執行的代碼塊； alert("Hello world!"); }，false ); ………使用方法：
1.先獲得元素的引用；
2.調用：addEventListener ( 事件名，函數（匿名函數、外部函數），布爾值);布爾值一般爲false,它表示的意義是在冒泡階段註冊事件處理程序，如不是特別需要，不建議在捕獲階段註冊事件處理程序（傳入的參數爲true）； -
也可以這樣使用二級事件處理程序：
var btn = document.getElementById("btn"); function show(){ // 要執行的代碼塊； alert(this.id); } btn.addEventListener("click"，show，false); -
移除DOM2 級事件處理程序,只能通過removeEventListener()來移除，removeEventListener(）裏面的參數必須和addEventListener()裏面的參數保持一致；
btn.removeEventListener("click"，show，false);
4.IE事件處理程序（可以包含多個事件，不按順序執行）：
-
使用方法：
1.先獲得元素的引用；
2.調用：addEventListener ( 事件名，函數（匿名函數、外部函數）)； -
先看例子(添加事件處理程序):
var btn = document.getElementById("btn"); btn.attachEvent("onclick",function(){ // 要執行的代碼塊； alert(this.id); } ); btn.attachEvent("onclick",function(){ // 要執行的代碼塊； alert("Hello world!"); } ); ……… -
移除事件處理程序：
var btn = document.getElementById("btn"); btn.detachEvent("onclick",function(){ // 要執行的代碼塊； alert(this.id); }); btn.detachEvent("onclick",function(){ // 要執行的代碼塊； alert("Hello world!"); }); ……… -
注：
1.IE事件處理程序的執行順序和DOM2級事件相反，從後面開始執行；
2.IE事件名需要 + “on”，和DOM0 級一樣；
3.IE事件處理程序只需要兩個參數，其餘和DOM2級事件大同小異；
4.IE事件處理程序只能依靠detachEvent()；來移除，參數前後必須一致；