事件就是用戶或?yàn)g覽器自身執(zhí)行的某種操作哥力。為時(shí)間指定處理程序的方式有以下幾種：
- HTML事件處理程序
- DOM0級(jí)事件處理程序
- DOM2級(jí)事件處理程序
- IE事件處理程序
HTML事件處理程序
直接在元素中定義事件處理程序唇敞，事件處理程序可以包含要執(zhí)行的操作筋栋，也可以調(diào)用在頁(yè)面其他地方定義的腳本
//直接在事件處理程序中包含
<input type="button" value="click me" onclick="alert('clicked')"/>
//調(diào)用其他地方定義的腳本
<script>
function showMessage(){
alert('clicked');
}
</script>
<input type="button" value="click me" onclick="showMessage()"/>
缺點(diǎn)：
- 存在時(shí)差問題，如果函數(shù)是在頁(yè)面最底部定義举户，用戶在js代碼還未解析時(shí)出發(fā)相應(yīng)事件烤宙，就會(huì)引發(fā)錯(cuò)誤。為此很多HTML事件處理程序都會(huì)被封裝在一個(gè)try-catch塊中俭嘁，以便錯(cuò)誤不會(huì)被顯示出來。
- html代碼和js代碼緊密耦合服猪，若要更換事件處理程序供填，則要改動(dòng)html代碼和js代碼。
DOM0級(jí)事件處理程序
通過js指定事件處理程序的傳統(tǒng)方式罢猪，就是把一個(gè)函數(shù)賦值給一個(gè)事件處理程序近她。(要使用這種方式，必須獲得要操作的對(duì)象的引用)
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert("clicked");
}
使用DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法膳帕。因此粘捎，事件處理程序是在元素的作用中運(yùn)行，就是說程序中this指向當(dāng)前元素危彩。
var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert(this.id); //"myBtn"
}
刪除這種形式綁定的事件處理程序攒磨，只需要將事件處理程序的的值設(shè)置為null。
DOM2級(jí)事件處理程序
- addEventListener()用于指定事件處理程序
- removeEventListener()用于移除用addEventListener()指定的事件處理程序
它們都接受三個(gè)參數(shù)：要綁定的事件名稱汤徽，處理函數(shù)和一個(gè)布爾值娩缰。
布爾值為true，則事件處理程序在捕獲階段觸發(fā)谒府，為false則在事件冒泡階段觸發(fā)拼坎。與DOM0級(jí)一樣浮毯，事件處理程序是在元素的作用域內(nèi)運(yùn)行，就是說程序中this指向當(dāng)前元素
var btn = document.getElementById("myBtn");
var handler = function(){ alert("clicked" };
//指定事件處理程序
btn.addEventListener("click", handler, false);
//移除事件處理程序
btn.removeEventListener("click", handler, false);
注意：移除時(shí)事件處理程序函數(shù)必須與指定的函數(shù)相同
優(yōu)點(diǎn)：可以添加多個(gè)事件處理程序泰鸡，會(huì)按照添加它們的順序觸發(fā)
IE事件處理程序
- attachEvent()用于指定事件處理程序
- detachEvent()用于移除事件處理程序
它們都接受兩個(gè)參數(shù)：要綁定的事件名稱债蓝，處理函數(shù)。
因?yàn)镮E8及更早版本只支持事件冒泡盛龄，所以通過attachEvent()添加的事件處理程序都會(huì)被添加到冒泡階段惦蚊。
不同于DOM0級(jí)和DOM2級(jí)，事件處理程序是在元素的作用域內(nèi)運(yùn)行讯嫂。使用attachEvent()指定事件處理程序蹦锋，事件處理程序會(huì)在全局作用域中運(yùn)行，即this指向window欧芽。
特點(diǎn)：可以為一個(gè)元素添加多個(gè)事件處理程序莉掂，但是觸發(fā)順序和添加順序相反。
跨瀏覽器的事件處理程序
function addHandler(element, type, handler){
if(element.addEventListener){
element.addEventListner(type, handler, false);
}else if(element.attachEvent){
element.addtachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
}
function removeHandler(element, type, handler){
if(element.removeEventListener){
element.removeEventListner(type, handler, false);
}else if(element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
}
