跨浏览器的事件处理程序和对象

跨浏览器的事件处理程序和对象

为了解决各种浏览器的差异问题，往往我们需要能够跨浏览器的程序。很多人会通过使各种的JavaScript库来解决这些问题，当然了，如果要自己编写也可以，通过使用能力检测的方法即可，从而让同一段代码在多数浏览器下一致运行。

• 创建一个addHandler()方法
• 创建一个removeHandler()方法

var EventUtil = {
    addHandler:function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler,false);
        }else if (element.attachEvent){
            element.attachEvent("on"+type, handler);//在事件类型前添加 on
        } else{
            element["on" + type]=handler;//给元素对象属性绑定监听函数，element.ontype
        }
    },//这要添加一个逗号
    
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
};

使用

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler); 
        
var removeBtn = document.getElementById("myRemoveBtn");
EventUtil.addHandler(removeBtn, "click", function(){
    EventUtil.removeHandler(btn, "click", handler); 
});

• 创建一个getEvent()方法
• 创建一个getTarget()方法
• 创建一个preventDefault()方法
• 创建一个stopPropagation()方法

var EventUtil = {
    addHandler:function(element, type, handler){//添加事件监听函数
        if (element.addEventListener){
            element.addEventListener(type, handler,false);
        }else if (element.attachEvent){
            element.attachEvent("on"+type, handler);//在事件类型前添加 on
        } else{
            element["on" + type]=handler;//给元素对象属性绑定监听函数，element.ontype
        }
    },//这要添加一个逗号
    
    removeHandler: function(element, type, handler){//删除事件监听函数
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    
    getEvent: function(event){//获取事件对象
        return event ? event : window.event;
    },
  
    getTarget: function(event){//获取事件对象目标
        return event.target || event.srcElement;
    },
    
    preventDefault: function(event){//阻止默认事件发生
        if (event.preventDefault){//标准event方法
            event.preventDefault();
        } else {
            event.returnValue = false;//IE属性，取消默认行为发生
        }
    },
    
    stopPropagation: function(event){//阻止冒泡
        if (event.stopPropagation){//标准event方法，不再派发事件
            event.stopPropagation();
        } else {
            event.cancelBubble = true;/IE属性，阻止事件传播到包容对象
        }
    }
};

实例

（1）

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    event = EventUtil.getEvent(event);//获取事件对象
    var target = EventUtil.getTarget(event);//获取事件目标
            
    alert(target.tagName);//弹出事件目标的标签名
};
        
EventUtil.addHandler(btn, "click", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
            
    alert(target.tagName);
});

（2）

var link = document.getElementById("myLink");
link.onclick = function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);//点击链接，没有反应，阻止了默认跳转行为
};   

（3）

var btn = document.getElementById("myBtn");
btn.onclick = function(event){//点击按钮弹出Clicked
    alert("Clicked");
    event = EventUtil.getEvent(event);//获取事件
    EventUtil.stopPropagation(event);//阻止冒泡
};
        
document.body.onclick = function(event){
    alert("Body clicked");//如果没有阻止冒泡，点击按钮后，先弹出clicked，然后弹出Body clicked，由于上面阻止冒泡了，所以这一步就不再发生了
};