一、4種事件處理程序
事件就是用戶或瀏覽器自身執行的某種操作，而事件處理程序即為響應某個事件的函數。事件處理程序大致分為5種：
- HTML 事件處理程序
- DOM 0級事件處理程序
- DOM 2級事件處理程序
- IE 事件處理程序
二、HTML 事件處理程序
什么是 HTML 事件處理程序呢？ 顯然，HTML 事件處理程序是寫在 HTML 標簽內的函數。
HTML 事件處理程序有兩種寫法：
- 最常見的是 HTML 中的事件處理
<button onclick="alert('我是HTML事件處理程序方法1')">按鈕1</button>
- 調用頁面中的函數執行
<button onclick="test()">按鈕2</button>
<script type="text/javascript">
function fun(){
alert('我是HTML事件處理程序方法2');
};
</script>
但是 HTML 事件處理程序存在著一些問題，比如修改時需要該動HTML代碼和函數處理的的代碼，比較麻煩。
三、DOM 0級事件處理程序（所有瀏覽器都支持）
DOM 0級事件處理程序是將一個函數賦值給一個事件處理程序屬性。
<button id="btn">我是DOM 0級事件處理程序</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("我是DOM 0級事件處理程序");
}
</script>
刪除事件處理程序的方法是：
btn.onclick = null;
四、DOM 2級事件處理程序（只有IE9、chrome、safari和opera支持）
DOM 2級事件處理程序有兩個方法：
- addEventListener() //添加事件監聽器
- removeEventListener() //移除事件監聽器
參數：
- type --事件名，如：click、change、mouseover等
- handler --事件處理函數
- true/false --true:捕獲階段調用事件處理程序，false:冒泡階段調用事件處理程序。
例子：
<button id="btn">我是DOM 2級事件處理程序</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
var test = function(){
alert("我是DOM 2級事件處理程序！");
};
// 添加事件監聽器
btn.addEventListener("click", test, false);
// 移除事件監聽器
btn.removeEventListener("click", test, false);
</script>
五、IE事件處理程序
IE事件處理程序同樣也有兩個方法：
- attachEvent() //添加事件
- detaEvent() //移除事件
參數：
- type --事件名，如：click、change、mouseover等
- handler --事件處理函數
例子：
<button id="btn">我是IE事件處理程序</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
var test = function(){
alert("我是IE事件處理程序！");
};
// 添加事件
btn.attachEvent("onclick", test);
// 移除事件
btn.detaEvent("onclick", test);
</script>
六、跨瀏覽器事件處理程序
<button id="btn">我是跨瀏覽器事件處理程序</button>
<script type="text/javascript">
function showMes(){
alert('我是跨瀏覽器事件處理程序');
};
var btn = document.getElementById('btn');
<!-- 跨瀏覽器事件處理程序 -->
var eventUtil = {
// 添加句柄(handler:觸發什么操作)
addHandler: function(element, type, handler){
if (element.addEventListener) {
// DOM 2級事件處理程序判斷
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
// IE 事件處理程序判斷
element.attachEvent('on'+type, handler);
} else {
// DOM 0級事件處理程序判斷
element['on'+type] = handler;
}
},
// 刪除句柄(handler:觸發什么操作)
removeHandler: function(element, type, handler){
if (element.removeEventListener) {
// DOM 2級事件處理程序判斷
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
// IE 事件處理程序判斷
element.detachEvent('on'+type, handler);
} else {
// DOM 0級事件處理程序判斷
element['on'+type] = null;
}
}
};
eventUtil.addHandler(btn, 'click', showMes);
eventUtil.removeHandler(btn, 'click', showMes);
</script>
注：要想彈出對話框就要注釋掉調用移除函數的代碼，比如：
eventUtil.removeHandler(btn, 'click', showMes);
希望本文對大家的學習能夠有所幫助，感謝大家的閱覽！
歡迎大家關注我的博客
