JavaScript之事件觸發on和事件監聽addEvent及addEventListener的區別和作用

一、on事件

爲dom節點添加多個on事件只會執行最後的那個事件，因爲最後的指定的on事件指向最後的那個函數，代碼如下所示：

function method1(){
	console.log('我是方法1')
}
function method2(){
	console.log('我是方法2')
}
function method3(){
	console.log('我是方法3')
}

var button = document.getElementById("btn");
button.onclick = method1;
button.onclick = method3;
button.onclick = method2;

這種寫法只會執行method2函數，並輸出'我是方法2'

 

二、addEvent事件監聽

addEvent事件監聽可以爲DOM節點綁定多個事件，且允許出現相同事件。

addevent(type, listener[, options])函數可以傳遞三個參數：
       type表示監聽事件類型的字符串（注意不用on開頭）
       listener當所監聽的事件類型觸發時，會接收到一個事件通知對象（回調函數）
       options（可選）值爲Boolean類型，如果值爲false(默認值)，事件觸發機制就會按照冒泡(從下往上)，如果值爲true，就會按照事件捕獲，從上往下。

button.addEventListener("click", method1, false);
button.addEventListener("click", method3, false);
button.addEventListener("click", method2, false);
//[輸出結果]
我是方法1
我是方法3
我是方法2

需要注意的是監聽事件分爲addEventListener和attachEvent函數，分別用在不同的瀏覽器和不同的版本。

 

三、事件監聽案例

3.1 JavaScript代碼

var button = document.getElementById("btn"),
	addBtn = document.getElementById("addBtn"),
	removeBtn = document.getElementById("removeBtn");

addBtn.onclick = function() {
	addMethod(button, 'click', say)
}
removeBtn.onclick = function() {
	removeMethod(button, 'click', say)
}

//[綁定監聽事件]
function addMethod(node, type, method) {
	if (node.addEventListener) { // IE9以下不兼容
		node.addEventListener(type, method, false)
	} else if (node.attachEvent) { // IE獨有
		node.attachEvent(`on${type}`, method)
	} else {
		node[`on${type}`] = method; // 一個元素只能綁定一個處理程序
	}
}

//[移除監聽事件]
function removeMethod(node, type, method) {
	if (node.removeEventListener) { // IE9以下不兼容
		node.removeEventListener(type, method, false)
	} else if (node.detachEvent) { // IE獨有
		node.detachEvent(`on${type}`, method)
	} else {
		node[`on${type}`] = null;
	}
}

function say() {
	console.log("Hello World!")
}

3.2 效果展示