事件

1.采用了观察者模式(observer)
2.同一个事件可以有多个处理函数
3.在添加事件的时候对应的处理函数不能是匿名函数(不然是不能被移除的)
添加事件监听 addEventListener
addEventListener(监听事件名,处理函数,冒泡false 还是捕获 true)
移除事件监听 removeEventListener
removeEventListener(事件名,处理函数)
封装的兼容方法
var btn = document.querySelector("button")
function hanlder(){
console.log("123");
}
//添加监听 同一个事件可以有多个处理函数
btn.addEventListener('click',hanlder,false)
btn.addEventListener('click',function(){
console.log("456");
},false) //是否捕获
//移除事件监听 函数的指向不一样 开辟俩个内存空间 地址是不一样 移除不了
//移除对应的事件名中某个匹配处理函数
btn.removeEventListener('click',hanlder)
//兼容 ie8以下
// btn.attachEvent("onclick",fn) 添加
// btn.detachEvent("onclick",fn) 移除
//事件监听器的兼容
//添加事件的元素 事件类型 处理函数
function addEvent(element,type,fn){
element.addEventListener?
element.addEventListener(type,fn):element.attachEvent(`on${type}`,fn)
}
function removeEvent(element,type,fn){
element.removeEventListener?
element.removeEventListener(type,fn):element.detachEvent(`on${type}`,fn)
}

posted @ 2022-06-13 18:39  萌萌11  阅读(37)  评论(0)    收藏  举报