本篇主要介紹HTML元素事件的注冊、注銷的方式。
其他事件文章
2. HTML 事件(二) 事件的注冊與注銷
目錄
1. 注冊事件：介紹通過元素的事件屬性、addEventListener()以及attachEvent()方法進行事件的注冊。
2. 注銷事件：介紹通過removeEventListener()、detachEvent()以及事件屬性賦值為null來進行事件的注銷。
1. 注冊事件
注冊事件的方式其實有2種：一種屬性注冊，另一種通過方法注冊。
①屬性注冊方式又可分為在HTML元素內的事件屬性賦值和通過JS指定元素對象的事件屬性。
②方法注冊方式可通過addEventListener()或attachEvent()方法進行事件的注冊。
1.1 設置HTML元素屬性為事件處理程序
說明：在HTML頁面中，設置元素屬性為一個函數。
語法：<button onlick="sayHello()">點擊</button>
注意：事件屬性是以"on"開頭，后面跟着事件名稱。如：onclick、onload。
示例：
JS代碼：
function sayHello() {
console.log('hello')
}
HTML代碼：
<button onclick="sayHello()">點擊</button>
1.2 通過JS設置元素對象的屬性為事件處理程序
說明：通過JS獲取元素的對象，設置其事件屬性為一個事件處理程序。
語法：EventTarget.onEventName=function(e){};
注意：事件屬性是以"on"開頭，后面跟着事件名稱。如：onclick、onload。
唯一性：屬性注冊具有唯一性；同一個事件，最后注冊的處理程序將會覆蓋前面注冊的處理程序。
示例1：事件屬性注冊的演示
// 注冊body的click事件
document.body.onclick = function (e) {
alert(1);
};
示例2：事件屬性注冊的唯一性
document.body.onclick=function(e){
console.log(1);
}
// 會覆蓋前面注冊的事件處理程序
document.body.onclick=function(e){
console.log(2);
}
document.body.click(); // => 2 ：只輸出后面屬性注冊的
1.3 addEventListener()方法注冊事件
說明：在JS中，window、document、HtmlElement等對象可以通過addEventListener()方法注冊事件的處理程序。
語法：EventTarget.addEventListener(eventName, eventHandler, |useCapture )
參數：
①eventName {string} ：所要注冊的事件名稱，不區分大小寫。此名稱不需要像注冊事件屬性那樣前綴加上"on"。如注冊鼠標點擊事件，寫為click。
②eventHandler {function | function Object} ：函數或者函數對象。事件觸發時所需要執行的函數；當使用函數對象多次注冊同一事件時，只當注冊一遍。
③useCapture {boolean} 可選 ：是否處於捕獲階段，默認為false。
多次注冊：addEventListener()方法能為同一個對象的同一事件注冊多次。當發生此事件時，注冊的處理事件程序將按照注冊先后順序執行。
注意：
①IE9之前的IE的不支持此方法，可使用attachEvent()代替。
②若使用相同的事件處理程序對象多次注冊在同一個事件上，只算注冊一次。
示例1：多次注冊同一事件，按注冊順序執行，先輸出1，再輸出2
document.body.addEventListener('click',function(e){
console.log('1');
});
document.body.addEventListener('click',function(e){
console.log('2');
});
document.body.click(); // => 1,2
示例2：使用函數對象多次注冊同一事件：只當注冊一次
function sayHello(){
console.log('hello');
}
document.body.addEventListener('click',sayHello);
// 使用處理程序多次注冊同一事件，只當注冊一次
document.body.addEventListener('click',sayHello);
document.body.click(); // => hello ：只輸出一遍
1.4 attachEvent()方法注冊事件
說明：IE9之前的IE版本可通過此方法注冊事件。
語法：EventTarget.attachEvent(eventName, eventHandler)
①eventName {string} ：所要注冊的事件名稱，區分大小寫。這里的名稱跟事件屬性一樣，以"on"開頭，后面跟着事件名稱。如：onclick、onload。
②eventHandler {function | function Object} ：函數或者函數對象。事件觸發時所需要執行的函數；當使用函數對象多次注冊同一事件時，可注冊多次(addEventListener()方法只當注冊一次)。
多次注冊：attachEvent()方法能為同一個對象的同一事件注冊多次。當觸發此事件時，也會依次執行。
示例：
function say(){
console.log('1');
}
document.body.attachEvent('onclick',say);
document.body.attachEvent('onclick',say); // say第二次注冊同一事件
document.body.click(); // => 1 1 ：輸出了2次say函數
1.5 JQuery中的事件注冊方式
JQuery中的事件注冊方式對多瀏覽器的差異性進行了解決：判斷元素是否含有addEventListener()或者attachEvent()方法。
示例：
function add(element,type, eventHandle){
if (element.addEventListener) {
element.addEventListener(type, eventHandle, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, eventHandle);
}
}
2. 注銷事件
可以注冊元素的事件， 相應的可以也注銷元素的事件。
JS中，可調用removeEventListener()[對應於addEventListener()] 和detachEvent()[對應於attachEvent()]來注銷元素的某個事件指定的處理程序，也可以給事件屬性賦值null來注銷此事件的所有綁定。
2.1 removeEventListener(eventName, function Object)
說明：注銷通過addEventListener()注冊的事件處理程序。
語法：EventTarget.removeEventListener(eventName, eventHandlerObj)
參數：
①eventName {string} ：所要注銷的事件名稱，不區分大小寫。此名稱不需要像注冊事件屬性那樣前綴加上"on"。如注冊鼠標點擊事件，寫為click。
②eventHandlerObj {function Object} ：函數對象。傳入一個函數體是沒有效果的。
示例1：通過addEventListener()注銷事件
function sayHello(e) {
console.log('1');
}
// 注冊body click事件
document.body.addEventListener('click', sayHello);
// 注銷body click事件的sayHello函數
document.body.removeEventListener('click',sayHello);
document.body.click(); // 觸發click事件，不輸出任何結果
示例2：若第二個參數為函數體，將不會注銷
function sayHello(e) {
console.log('1');
}
// 注冊body click事件
document.body.addEventListener('click', sayHello);
// 第二個參數為函數體，雖然跟sayHello函數的內容一樣，但不會注銷
document.body.removeEventListener('click', function(e) {
console.log('1');
});
document.body.click(); // => 1 ：輸出結果為1，並沒有注銷成功
2.2 detachEvent(eventName, function Object)
說明：注銷通過attachEvent()注冊的事件處理程序。
語法：EventTarget.detachEvent(eventName, eventHandlerObj)
參數：
①eventName {string} ：所要注銷的事件名稱，區分大小寫。這里的名稱跟事件屬性一樣，以"on"開頭，后面跟着事件名稱。如：onclick、onload。
②eventHandlerObj {function Object} ：：函數對象。傳入一個函數體是沒有效果的。
示例1：通過detachEvent()注銷事件
function sayHello() {
console.log('1');
}
document.body.attachEvent('onclick', sayHello);
document.body.detachEvent('onclick', sayHello); // 注銷事件
document.body.click(); // 不輸出結果
示例2：若第二個參數為函數體，將不會注銷
function sayHello() {
console.log('1');
}
document.body.attachEvent('onclick', sayHello);
// 第二個參數為函數體，雖然跟sayHello函數的內容一樣，但不會注銷
document.body.detachEvent('onclick', function (e) {
console.log('1');
});
document.body.click(); // => 1 ：輸出結果為1，並沒有注銷成功
示例3：多次注冊與多次注銷
因為attachEvent()可以把一個函數對象多次注冊到元素同一個事件上，所以調用一次detachEvent()只能注銷掉一次。
function sayHello() {
console.log('1');
}
document.body.attachEvent('onclick', sayHello);
document.body.attachEvent('onclick', sayHello); // 注冊了2次
document.body.click(); // => 1 1：輸出2次
document.body.detachEvent('onclick', sayHello); // 注銷1次
document.body.click(); // => 1 ：輸出結果為1，只注銷了1次
2.3 取消事件
給對象的事件屬性賦值為null，可取消此事件的所有注冊過的處理事件程序。
示例：
document.body.addEventListener('onclick', function(e){
console.log(1);
});
document.body.addEventListener('onclick', function(e){
console.log(2);
});
document.body.onclick=null; // onclick屬性賦值為null，相當於注銷了onclick事件
document.body.click(); // 無操作