（一）定義
事件就是用戶或者瀏覽器自身執行的某種行爲，例如click，mouseover，都是事件的名字。而
響應某個事件的函數就叫做事件處理函數（或者事件監聽器）。
（二）HTML事件處理函數
HTML
<body>
<form action=" ">
<input type="button" value="clickMe" onclick="alert(this.value)">
</form>
</body>
此時單擊按鈕就會彈出此input的value，這個操作是通過指定onclick特性並將一些JavaScript代碼作爲它的值來定義的。由於這個值是JavaScript，因此不能使用未轉義的HTML語法字符。
① 特點
首先，這樣會創建一個封裝着元素屬性值的函數。這個函數中有一個全局變量event，也就是事件對象，通過event變量，可以直接訪問事件對象，不用自己定義它，也不用從函數的參數列表中讀取。在這個函數內部，this值等於事件的目標元素
例如
<body>
<form action=" ">
<input type="button" value="clickMe" onclick="alert(event.type)">
</form>
</body>
還可以調用一個函數
<body>
<form action=" ">
<input type="button" value="clickMe" onclick="show()">
</form>
<script>
function show() {
alert(this);
}
</script>
</body>
注意，此時this指向window
② 缺點
- 如果用戶在頁面
解析show函數之前就單擊了按鈕，就會引發錯誤，爲此很多HTML事件處理程序都會 被封裝在一個try-catch塊中，以便錯誤不會浮出水面。
<input type="button" value="clickMe" onclick="try{show();}catch(ex){}">
- 這樣擴展事件處理程序的
作用域在不同瀏覽器中會導致不同的結果，不同的JavaScript引擎遵循的標識符解析規則略有差異，很可能會在訪問非限定成員時出錯。 - HTML與JavaScript代碼緊密耦合，想要改動就得改動兩個地方，
不易於維護。
（三）DOM0級事件處理函數
① 使用
使用DOM0級方法指定的事件處理函數被認爲是元素的方法。因此這時候的事件處理程序是在元素的作用域中運行：
<body>
<form action=" ">
<input type="button" value="clickMe">
</form>
<script>
var oInput = document.querySelector("input");
oInput.onclick = function(){
alert(this.value)
}
</script>
</body>
單擊按鈕顯示的是元素的value，這個value是通過this.value進行獲取的，不僅僅是value，在事件處理函數中能通過this訪問元素的任何屬性和方法，以這種方式添加的事件處理函數程序會在事件流的冒泡階段被處理。
② 刪除
<script>
var oInput = document.querySelector("input");
oInput.onclick = function(){
alert(this.value)；
oInput.onclick = null; //放在函數內部，點擊一次後才刪除
}
oInput.onclick = null; //放在函數外部，直接刪除
</script>
③ 缺點
同一個事件只能綁定一次，後面的會覆蓋前面的只能在冒泡階段觸發事件處理程序
（四）DOM2級事件處理函數
DOM2級事件定義了兩個方法，用於處理指定和刪除事件處理程序的操作：addEventListener( ）和 removeEventListener（ ）。所有DOM節點都包含着兩種方法，並且它們都接收三個參數：要處理的事件名，作爲事件處理程序的函數和一個布爾值（默認爲false），最後這個布爾值是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
↓
如果你對冒泡，捕獲不夠了解，可以轉到此文章
① 使用
<script>
var oInput = document.querySelector("input");
oInput.addEventListener("click",show);
function show(){
alert(this.value);
}
</script>
② 刪除
oInput.removeEventListener("click",show)
③ 注意
通過addEventListener(）添加的事件處理程序只能用removeEventListener（）來移出；移出時傳入的參數與添加處理程序時所使用的的參數相同。這也就意味着通過addEventListener（）添加的匿名函數無法移出
例如：
oInput.addEventListener("click",function(){
alert(this.value)
});//這樣添加的事件處理函數無法被移出
結語：若文章有錯誤的地方，煩請在評論區指出。當然，我會不定時的重新編輯寫過的文章，查錯及優化，希望能將最好的文章展現給讀者。