通用的事件绑定的实现

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

场景

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