addEventListener注册事件(事件监听)

来源:互联网 发布:网络小手分享论 编辑:程序博客网 时间:2024/06/07 08:40
注册事件的简单方式::
bth.on事件 = function{
};
如果重复注册相同的事件,后面的事件会把前面的事件覆盖掉。
例子:
输入一下代码,点击事件,控制台输出
document.onclick=function() {
console.log("厉害");
}
document.onclick=function() {
console.log("我的哥");
}
对以后的开发不利,会造成影响故,而引用另一种方式——事件监听。addEventListener:注册事件
document.addEventListener(参数1"string",参数2function,参数3boolean)
参数1:事件类型,click,mouseover等;参数2:function函数作为参数调用;参数3布尔值默认为false,下一篇事件流再叙
参数2,function触发,可用匿名函数,也可以指定函数名

document.addEventListener("click", fn);
function fn(){
console.log("哎呦");
}

document.addEventListener("click", function () {
console.log("不错哟");
});
注册事件与移除(删除)事件监听:
removeEventListener("事件类型",fn函数)
document.removeEventListener("click", 函数名);
*如果想要移除注册事件,必须要有函数名!
与下面的空数组和对象一样,匿名函数
数组console.log([ ] == [ ]);对象console.log({ } =={ });
打印出来都是false,为什么?
[]==[];与{}=={}都是比较的地址(引用),[]相当于new了一个数组,另一个[]也是,都是在内存空间中创造了数组空间,只是都是空的数组而已,并不是同一个数组,对象同理。

addEventListener具有兼容性
(IE678不支持addEventListener与removeEventListen两个方法,但是支持attachEvent与detachEvnet)
attachEvent(type, func)与addEventListener
//type:事件类型 需要加上on onclick onmouseenter
//func:需要执行的那个事件
(顺序是倒的)
detachEvnet(type, func);
兼容性封装:
function addEvent(element, type, fn) {
if ("addEventListener" in element) {
element.addEventListener(type, fn);
} else {
element.attachEvent("on" + type, fn);//type缺少on,加上字符串"on”;
}
}

function removeEvent(element, type, fn){
if ("addEventListener" in element) { //有addEventListener就必肯定可以有removeEventListener可以直接写
element.removeEventListener(type, fn);
} else {
element.detachEvent("on" + type, fn);
}
}
阅读全文
0 0
原创粉丝点击