js事件詳解一

事件處理的方法：

一、直接在html中編寫

例如：

<form>
    <input type="text" name="username" value="">
    <input type="button" value="Echo Username" onclick="alert(username.value)">
</form>

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

二、JavaScript指定事件處理程序

每一個元素都有本身的事件處理程序屬性，這些屬性一般所有小寫，例如onclick。將這種屬性的值設置爲一個函數，就能夠指定事件處理程序，以下所示：

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

在此，咱們經過文檔對象取得了一個按鈕的引用，而後爲它指定了onclick事件處理程序。但要注意，在這些代碼運行之前不會指定事件處理程序，所以若是這些代碼在頁面中位於按鈕後面，就可能在一段事件內怎麼單擊都沒有反應。

刪除事件：

btn.onclick=null;

以上都是DOM0級的事件處理方式，而DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程序的操做：addEventListener()和removeEventListener()。全部DOM節點中都包含這兩個方法，而且它們都接受3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。

例如，要再按鈕上爲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);

這裏爲按鈕添加了兩個事件處理程序。這兩個事件處理程序會按照添加它們的順序觸發。

經過addEventListener()添加的事件處理程序之恩給你使用removeEventListener()來移除；移除時傳入的參數與添加處理程序時使用的參數相同。這也覺得着經過addEventListener()添加的匿名函數將沒法移除。由於傳入removeEventListener()中的事件處理程序函數必須與傳入addEventListener()中的相同。

在大多數狀況下，都是將事件處理程序添加到事件流的冒泡階段，這樣能夠最大限度的兼容各類瀏覽器。最好只在須要在事件到達目標以前截獲它的時候將事件處理程序添加到捕獲階段。