考虑IE兼容性
关于IE低版本的兼容性处理:
IE低版本使用attachEvent绑定事件实现,使用量也比较少,很多网站并不支持。
考虑代理
代理是事件冒泡的一个具体应用
场景:动态随时新增元素,如一个div下面的多个a标签;
方法:将事件绑定到父级div上,通过target属性拿到具体的事件发生者
div1.attachEventListener('click',function(e){
var target = e.target;
if(target.nodeName === 'A'){
alert(targrt.innerHTML)
}
})
//使用代理
div1 = document.getElementById("div1")
bindEvent(div1,'click','a',function(e){
e.preventDefault()
console.log(this.innerHTML)
}
//不使用代理
a= document.getElementById("a")
bindEvent(a,'click',function(e){
e.preventDefault()
console.log(a.innerHTML)
}
通用事件的实现
function bindEvent(elem,type,selector,fn){
if(fn == null){
fn=selector
selector=null
}//
elem.addEventListener(type,function(e){
var target
if(selector){//使用代理
target =e.target
if(target.matches(selector)){//匹配选择器
fn.call(target,e)//this绑定到target
}
}else{//不使用代理
fn(e)
}
})
}
场景
无限下拉的加载图片的页面,如何绑定事件?
使用代理实现:代码简洁,绑定一次就可以,对浏览器的压力小,渲染好一点