事件监听可以给一个元素添加不同的事件,或者添加相同的事件但是执行不同的操作。 那你可能会说为什么直接给元素的事件赋值呢?像这样:
obj.onclick = function(){ console.log("click"); }
obj.ondblclick = function(){ console.log("doublue click"); }
但如果还想给点击事件添加新的方法,只能在原来的基础上添加代码,这样会显得很乱,一种方法就应该封装到一个函数里不是吗?如果再写一个点击事件,就会把原来的覆盖掉。这时候事件监听的优势就体现出来了,用代码说明一切吧。
var oBtn = document.getElementById("btn");
//第一个参数为事件,不用加on;第二个参数为函数名;
//第三个若为 true 则事件采用事件捕获,为false则是事件冒泡,一般情况下用false
oBtn.addEventListener("click", click1, false);
oBtn.addEventListener("click", click2, false);
oBtn.addEventListener("dblclick", dblClick, false);
function click1(){
console.log("click 1");
}
function click2(){
console.log("click 2");
}
function dblClick(){
console.log("double click");
}
既然能添加那么肯定也能删除,可以用 oBtn.removeEventListener("click", click1)
移除。但上面的添加和删除方法在低版本IE浏览器都不能用,不过IE有自己的方法:
oBtn.attachEvent("onclick", click1);
oBtn.detachEvent("onclick", click1);
这里要注意IE的方法里第一个参数是带上 on 的。
下面把兼容的函数写一下
function addEventListener(obj, event, fn, boo){
if (obj.addEventListener) {
obj.addEventListener(event, fn, boo);
} else {
obj.attachEvent("on" + event, fn);
}
}
function removeEventListener(obj, event, fn, boo){
if (obj.removeEventListener) {
obj.removeEventListener(event, fn, boo);
} else {
obj.detachEvent("on" + event, fn);
}
}
网友评论