js事件詳解一

TerryCai 發(fā)布于2019-08-21 10:37 / 1771人閱讀

摘要：所有節(jié)點中都包含這兩個方法，并且它們都接受個參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值如果是，表示在捕獲階段調(diào)用事件處理程序如果是，表示在冒泡階段調(diào)用事件處理程序。

事件處理的方法： 1、直接在html中編寫

例如：

但是這樣處理的事件存在兩個缺點，一個是時間差問題，一個是不同瀏覽器對標識符的解析有差異，很可能會在訪問非限定對象成員時出錯。

2、JavaScript指定事件處理程序

每個元素都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫，例如onclick。將這種屬性的值設(shè)置為一個函數(shù)，就可以指定事件處理程序，如下所示：

var btn=document.getElementById("btn");
    btn.onclick=function(){
        alert("clicked");
    }

在此，我們通過文檔對象取得了一個按鈕的引用，然后為它指定了onclick事件處理程序。但要注意，在這些代碼運行以前不會指定事件處理程序，因此如果這些代碼在頁面中位于按鈕后面，就可能在一段事件內(nèi)怎么單擊都沒有反應(yīng)。

刪除事件：

btn.onclick=null;

以上都是DOM0級的事件處理方式，而DOM2級事件定義了兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener()。所有DOM節(jié)點中都包含這兩個方法，并且它們都接受3個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。

例如，要再按鈕上為click事件添加處理程序，可以使用以下代碼：

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

與DOM0級方法一樣，這里添加的事件處理程序也是在其依附的元素的作用域中運行。

使用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ù)將無法移除。因為傳入removeEventListener()中的事件處理程序函數(shù)必須與傳入addEventListener()中的相同。

在大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣可以最大限度的兼容各種瀏覽器。最好只在需要在事件到達目標之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥讲东@階段。