通用的事件绑定的实现

考虑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)
        }
    })
}

场景

无限下拉的加载图片的页面,如何绑定事件?
使用代理实现:代码简洁,绑定一次就可以,对浏览器的压力小,渲染好一点

猜你喜欢

转载自blog.csdn.net/bangbanggangan/article/details/81637891
今日推荐