addEventListener注册事件（事件监听）

注册事件的简单方式:：

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);
}
}