事件綁定的幾種方法

內聯 HTML 屬性法

　　最簡便也最難以維護的方式就是通過標簽的特定屬性來添加事件，例如：

<div onclick="alert('Ouch!')">click</div>

　　在這種情況下，只要該所在的區域被用戶單擊了，就會觸發該標簽的單擊事件。與此同時，其 onclick 屬性中的字符串就會被當做 JavaScript 代碼來執行。盡管，這里並沒有顯式指定監聽單擊事件的函數，但相關環境在幕后已經為此創建了一個函數，函數的代碼就等於我們為 onclick 屬性設定的值。 

元素屬性法

 

　　關於單擊事件函數，我們還有另一種編寫方式，那就是將其設置為 DOM 元素節點的屬性。例如：

<div id="my-div">click</div> 

<script> 
 var myelement = document.getElementById('my-div'); 
     myelement.onclick = function() { 
     alert('Ouch!'); 
     alert('And double ouch!'); 
 } 
</script>

　　事實上這也是一種更好的選擇。因為這種方式可以幫助我們理清與相關JavaScript代碼之間的關系。一般情況下。我們總是希望頁面中的內容歸 HTML、行為歸 JavaScript、格式歸 CSS，並且三者之間應該盡可能彼此獨立，互不干擾。

　　但這個方法也是有缺點的，因為這種做法只允許我們指定一個事件函數。

 

DOM的事件監聽

　　對於瀏覽器來說，最佳的事件處理方式莫過於出自DOM Level2的事件監聽器了。通過這種方式，我們可以為一個事件指定多個監聽器函數。當事件被觸發時，所有的監聽器函數都會被執行。而且這些監聽器不需要知道彼此的存在，它們的工作是彼此獨立的。任何一個監聽器的加入或退出都不會影響其它監聽器的工作。

<p id="closer">final</p>

　　我們可以通過 addEventListener()方法為單擊事件賦予相關的監聽器。下面我們嘗試賦予兩個監聽器：

var mypara = document.getElementById('closer'); 
    mypara.addEventListener('click', function(){ 
        alert('Boo!') 
    }, false); 
mypara.addEventListener( 
    'click', console.log.bind(console), false);    

　　如您所見，addEventListeners()方法是基於某一節點對象來調用的。它的首參數是一個事件類型的參數，第二個參數是一個函數指針，它可以是 function(){alert('Boo!')}這樣的匿數，也可以是 console.log()這樣的現存函數。該監聽器函數會在相關事件發生時被調用，調用時會接收到一個事件對象參數。如果我們運行上面的代碼，就可以在控制台看到所記錄的事件對象。單擊事件對象可以查看其屬性