js原生事件绑定

关于事件绑定的面试题和实际运用

如何编写一个通用的原生事件监听函数？

 // 简单封装一个通用事件绑定

    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn);
    }

    var a = document.getElementById('link1');

    bindEvent(a,'click',function(e){
        e.preventDefault();  // 阻止标签默认行为
        alert('click')
    });

// 关于低版本时间兼容
    // 使用attachEvent绑定事件

关于低版本的浏览器我们只需要了解就好了，如果你在面试中如果要求要对很低版本的浏览器做兼容的话，建议你还是换一个机会去面，处理低版本浏览器的兼容是浪费生命的一件事情。

使用事件冒泡实现代理事件绑定？

在实际工作运用中,比如这么一个场景：我们要对一页的多个图片项做事件绑定，如果我们一个个对图片绑定是一件很麻烦的事情，而且还有对重新加载的图片做重新的绑定这是个很麻烦的时候。所以我们使用事件冒泡实现代理绑定事件就完美解决了这些问题.。

这里我们使用绑定父元素的点击事件，然后使用子元素的冒泡事件触发点击，然后通过e.target（事件目标对象）判断触发事件元素的那个。

    
    
    
    


    事件绑定
    

        
        
        
        
    
 

所以我们现在重新封装通用事件的件兼容函数

    // elem:元素  type:事件类型  selector:目标元素节点的名称  fn：事件触发方法
    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
                // matches  target是
                if(target.matches(selector)){
                    fn.call(target,e)
                }
            }else{
                fn(e)
            }
        })
    }

    bindEvent(div1,'click','a',function(e){
        alert(e.target.innerHTML)
    })