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