本篇主要介紹HTML元素事件的註冊、登出的方式。

其他事件文章

2. HTML 事件(二) 事件的註冊與登出

目錄

1. 註冊事件：介紹通過元素的事件屬性、addEventListener()以及attachEvent()方法進行事件的註冊。

2. 登出事件：介紹通過removeEventListener()、detachEvent()以及事件屬性賦值為null來進行事件的登出。

1. 註冊事件

註冊事件的方式其實有2種：一種屬性註冊，另一種通過方法註冊。

①屬性註冊方式又可分為在HTML元素內的事件屬性賦值和通過JS指定元素物件的事件屬性。

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. 登出事件

可以註冊元素的事件， 相應的可以也登出元素的事件。

2.1 removeEventListener(eventName, function Object) 

語法：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(); // 無操作