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 效果展示