淺談Javascript事件處理程序的幾種方式
2024-05-06 14:21:40
供稿：網(wǎng)友
事件就是用戶或瀏覽器自身執(zhí)行的某種動作。比如說click,mouseover，都是事件的名字。而相應(yīng)某個事件的函數(shù)就叫事件處理程序（或事件偵聽器）。為事件指定處理程序的方式有好幾種。
一：HTML事件處理程序。
如:
代碼如下:
<script type="text/javascript">
function show(){
alert('hello world!');
}
</script>
<input type="button" value="click me" onclick="show()"/>
相信這種方式是目前咱們大家用得比較多的一種，但是在html中指定事件處理程序有兩個缺點。
(1)首先：存在一個時差問題。就本例子來說,假設(shè)show()函數(shù)是在按鈕下方，頁面的最底部定義的，如果用戶在頁面解析show()函數(shù)之前就單擊了按鈕，就會引發(fā)錯誤；
(2)第二個缺點是html與javascript代碼緊密耦合。如果要更換時間處理程序，就要改動兩個地方：html代碼和javascript代碼。
因此，許多開發(fā)人員摒棄html事件處理程序，轉(zhuǎn)而使用javascript指定事件處理程序。
二：Javascript指定事件處理程序
javascript指定事件處理程序包括三種方式：
(1):DOM0級事件處理程序
如：
代碼如下:
var btn=document.getElementById("mybtn"); //取得該按鈕的引用
btn.onclick=function(){
alert('clicked');
alert(this.id); // mybtn
以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。
刪除DOM0級方法指定的事件處理程序：
btn.onclick=null; // 刪除事件處理程序
}
(2):DOM2級事件處理程序
DOM2級事件定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點中都包含這兩個方法，并且它們都接受3個參數(shù)：要處理的事件名，做為事件處理程序的函數(shù)和一個布爾值。最后這個參數(shù)如果是true,表示在捕獲階段調(diào)用事件處理程序；如果是fasle,表示在冒泡階段調(diào)用事件處理程序。
如：
代碼如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
使用DOM2級事件處理程序的主要好處是可以添加多個事件處理程序。
如：
代碼如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
btn.addEventListener("click",function(){
alert("hello world!");
},false);
這里為按鈕添加了兩個事件處理程序。這兩個事件處理程序會按照它們的順序觸發(fā)。
通過addEventListener()添加的時間處理程序只能使用removeEventListener()來移除，移除時傳入的參數(shù)與添加時使用的參數(shù)相同。這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除。
如：
代碼如下:
var btn=document.getElementById("mybtn");
btn.addEventListener("click",function(){
