事件監聽

事件監聽就是讓計算機等待某個事件的發生，當這個事件發生之後，對其做出一個相應，如等待滑鼠單擊按鈕，單擊發生時開啟一個新的頁面；但是你寫的監聽事件發現這件事情後，會進行阻止，讓其無法跳轉。

事件監聽涉及到三個類物件

1、EventSource(事件源）事件發生的場所

2、Event(事件)：事件封裝介面元件上面發生的特定事件

3、EventListener(事件監聽器)：負責監聽事件源發生的事件

事件監聽用法

1、當同一個物件使用.onclick的寫法觸發多個方法的時候，後一個方法會把前一個方法覆蓋掉，也就是說，在物件的onclick事件發生時，只會執行最後繫結的方法。而用事件監聽則不會有覆蓋的現象，每個繫結的事件都會被執行。

window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.onclick = function(){ 
  alert("第一個事件"); 
 } 
 btn.onclick = function(){ 
  alert("第二個事件"); 
 } 
 btn.onclick = function(){ 
  alert("第三個事件"); 
 } 
}
123456789101112

2、採用事件監聽給物件繫結方法後，可以解除相應的繫結。

var eventOne = function(){ 
 alert("第一個監聽事件"); 
} 
function eventTwo(){ 
 alert("第二個監聽事件"); 
} 
window.onload = function(){ 
 var btn = document.getElementById("yuanEvent"); 
 btn.addEventListener("click",eventOne); 
 btn.addEventListener("click",eventTwo); 
 btn.removeEventListener("click",eventOne); 
}
123456789101112
 

3、解除繫結事件的時候一定要用函式的控制代碼，把整個函式寫上是無法解除繫結的。

btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne); 
12

事件模型

javascript中有兩種事件模型：DOM0，DOM2。
DOM0級事件模型是早期的事件模型，所有的瀏覽器都是支援的，而且其實現也是比較簡單。

<p id = 'click'>click me</p>
<script>
    document.getElementById('click').onclick = function(event){
        alert(event.target);
    }
</script>
123456
 

這種事件模型就是直接在dom物件上註冊事件名稱，這段程式碼就是在p標籤上註冊了一個onclick事件，在這個事件函式內部輸出點選的目標。而解除事件則更加簡單，就是將null複製給事件函式，如下：

document.getElementById('click'_).onclick = null;

由此我們可以知道dom0中，一個dom物件只能註冊一個同類型的函式，因為註冊多個同類型的函式的話，就會發生覆蓋，之前註冊的函式就會無效。
DOM2級事件模型是捕獲和冒泡模型,就是一個事件, 要先捕獲到, 然後在執行冒泡
DOM2級的註冊事件和解除事件
在DOM2級中使用addEventListener和removeEventListener來註冊和解除事件。這種函式較之之前的方法好處是一個dom物件可以註冊多個相同型別的事件，不會發生事件的覆蓋，會依次的執行各個事件函式。