事件指定事件處理程序的方法主要有3種。 1、html事件處理程序：首先，這種方法已經過時了；2、DOM0級事件處理程：這種方法簡單且跨瀏覽器，但是只能為一個元素添加一個事件處理函數；3、DOM2級事件處理程序：DOM2級事件處理程序可以為一個元素新增多個事件處理程序。
一、事件處理程序
#前面提到，事件是使用者或瀏覽器本身執行的某種動作，如click,load和mouseover都是事件的名字。回應某個事件的函數就叫事件處理程序（也叫事件處理函數、事件句柄）。事件處理程序的名字以"on"開頭，所以click事件的事件處理程序就是onclick,load事件的事件處理程序就是onload。
為事件指定事件處理程序的方法主要有3種。
1、html事件處理程序
首先，這種方法已經過時了。因為動作(javascript程式碼)和內容(html程式碼)緊密耦合。但是寫個小demo的時候還是可以使用的。
這種方式也有兩種方法，都很簡單：
第一種：直接在html中定義事件處理程序及包含的動作。
程式碼如下:
第二種：html中定義事件處理程序，執行的動作則呼叫其他地方定義的腳本。
程式碼如下:
<script>function showMessage(){ alert("clicked!"); }</script>
note:
#1）透過event變數可以直接存取事件本身，例如onclick="alert(event .type)"會彈出click事件。
2）this值等於事件的目標元素，這裡目標元素是input。例如onclick="alert(this.value)"可以得到input元素的value值。
2、DOM0級事件處理程序
這種方法簡單且跨瀏覽器，但是只能為一個元素添加一個事件處理函數。
因為這種方法會為元素新增多個事件處理函數，則後面的會覆寫前面的。
新增事件處理程序：
<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
alert("clicked!");
}
</script>登入後複製
刪除事件處理程序：
程式碼如下：
myBtn.onclick=null;
3、DOM2級事件處理程序
DOM2級事件處理程序可以為一個元素新增多個事件處理程序。其定義了兩個方法用於新增和刪除事件處理程序：addEventListener()和removeEventListener()。
這兩個方法都需要3個參數：事件名，事件處理函數，布林值。
這個布林值為true,在捕獲階段處理事件，為false，在冒泡階段處理事件，預設為false。
新增事件處理程序：現在為按鈕新增兩個事件處理函數，一個彈出「hello」,一個彈出「world」。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.addEventListener("click",function(){
alert("hello");
},false);
myBtn.addEventListener("click",function(){
alert("world");
},false);
</script>登入後複製
刪除事件處理程序：透過addEventListener新增的事件處理程序必須透過removeEventListener刪除，且參數一致。
note:透過addEventListener新增的匿名函數將無法刪除。下面這段程式碼將不起作用！
程式碼如下:
myBtn.removeEventListener("click",function(){ alert("world"); },false);
看似該removeEventListener與上面的addEventListener參數一致，實則第二個參數中匿名函數是完全不同的。
所以為了能刪除事件處理程序，程式碼可以這樣寫：
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handler=function(){
alert("hello");
}
myBtn.addEventListener("click",handler,false);
myBtn.removeEventListener("click",handler,false);
</script>登入後複製
二、IE事件處理程序
1.實際應用場景
IE8及以下瀏覽器不支援addEventListener，在實際開發中如果要相容於IE8及以下瀏覽器。如果用原生的綁定事件，需要做相容處理，可利用jquery的bind代替。
2、IE8事件綁定
IE8及以下版本瀏覽器實作了與DOM類似的兩個方法：attachEvent()和detachEvent()。
這兩個方法都需要兩個參數：事件處理程序名稱和事件處理程序函數。
note:
IE11只支援addEventListener！
IE9，IE10對attachEvent和addEventListener都支援！
TE8及以下版本只支援attachEvent！
可以拿下面程式碼在IE各個版本瀏覽器中進行測試。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handlerIE=function(){
alert("helloIE");
}
var handlerDOM= function () {
alert("helloDOM");
}
myBtn.addEventListener("click",handlerDOM,false);
myBtn.attachEvent("onclick",handlerIE);
</script>登入後複製
添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world
<script>
var myBtn=document.getElementById("myBtn");
myBtn.attachEvent("onclick",function(){
alert("hello");
});
myBtn.attachEvent("onclick",function(){
alert("world");
});
</script>登入後複製
note:这里运行效果值得注意一下：
IE8以下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。
IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。
可见IE浏览器慢慢也走上正轨了。。。
删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。
和DOM事件一样，添加的匿名函数将无法删除。
所以为了能删除事件处理程序，代码可以这样写：
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
var handler= function () {
alert("hello");
}
myBtn.attachEvent("onclick",handler);
myBtn.detachEvent("onclick",handler);
</script>登入後複製
note:IE事件处理程序中还有一个地方需要注意：作用域。
使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。
而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。
下面例子会弹出true。
<input id="myBtn" type="button" value="click me!"/>
<script>
var myBtn=document.getElementById("myBtn");
myBtn.attachEvent("onclick",function(){
alert(this===window);
});
</script>登入後複製
在编写跨浏览器的代码时，需牢记这点。
IE7\8检测：
//判断IE7\8 兼容性检测
var isIE=!!window.ActiveXObject;
var isIE6=isIE&&!window.XMLHttpRequest;
var isIE8=isIE&&!!document.documentMode;
var isIE7=isIE&&!isIE6&&!isIE8;
if(isIE8 || isIE7){
li.attachEvent("onclick",function(){
_marker.openInfoWindow(_iw);
})
}else{
li.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
}登入後複製
以上所述是小编给大家介绍的JavaScript事件学习小结(二)js事件处理程序的相关知识，希望对大家有所帮助！
相关推荐：
以上是JavaScript學習中常會遇到的js事件處理程序的詳細內容。更多資訊請關注PHP中文網其他相關文章！
