JavaScript學習中常會遇到的js事件處理程序-js教程-PHP中文網

事件指定事件處理程序的方法主要有3種。 1、html事件處理程序：首先，這種方法已經過時了；2、DOM0級事件處理程：這種方法簡單且跨瀏覽器，但是只能為一個元素添加一個事件處理函數；3、DOM2級事件處理程序：DOM2級事件處理程序可以為一個元素新增多個事件處理程序。

一、事件處理程序

#前面提到，事件是使用者或瀏覽器本身執行的某種動作，如click,load和mouseover都是事件的名字。回應某個事件的函數就叫事件處理程序（也叫事件處理函數、事件句柄）。事件處理程序的名字以"on"開頭，所以click事件的事件處理程序就是onclick,load事件的事件處理程序就是onload。

為事件指定事件處理程序的方法主要有3種。

1、html事件處理程序

首先，這種方法已經過時了。因為動作(javascript程式碼)和內容(html程式碼)緊密耦合。但是寫個小demo的時候還是可以使用的。

這種方式也有兩種方法，都很簡單：

第一種：直接在html中定義事件處理程序及包含的動作。

程式碼如下:

第二種：html中定義事件處理程序，執行的動作則呼叫其他地方定義的腳本。

程式碼如下:

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事件处理程序的相关知识，希望对大家有所帮助！