跨浏览器事件兼容,巧妙处理方法

最新推荐文章于 2024-06-07 10:17:37 发布

caoliu1024cl

最新推荐文章于 2024-06-07 10:17:37 发布

阅读量1w

点赞数

说到原生浏览器事件函数处理兼容，大家可能会想到addEventListener().....以及attachEvent()....
相信看了下文，会给你提供不一样的更优雅的实现方式，希望下文会对你有帮助~~~~~

//添加事件处理函数
function  addEvent(element, type, handler){
    //如果函数之前没有绑定过事件（包括通过dom一级 on+‘方法名’绑定的），则增加函数的唯一标识，以便移除事件用到
    if(!handler)  handler.$$guid = addEvent.$$guid ++;
    //如果元素上不存在events对象则新建一个
    if(!element.events)  element.events = {};
   //如果events对象相应的类型存在的对象不存在，则新创建一个
    var handlers = element.events[type];
    if(!handlers){
         handlers = element.events[type] = {};
             //如果存在dom一级方式绑定了相同类型的事件，在type类型的事件触发时一并触发，这里先type对应的对象handlers中
         if(element["on" + type]){
             handlers[0] = element["on" + type];
         }
    }
    //将事件处理函数以键值对如{$$guid : handler}的方式保存起来供后面调用
    handlers[handler.$$guid] = handler;
    //以下的handlerEvent方法本人认为很巧妙，可谓’偷梁换柱‘呀
    element["on" + type] = handleEvent;
}
addEvent.$$guid = 1;

//事件处理函数处理，精华所在
function handleEvent(event){
    //默认事件操作不取消
    var returnValue = true;
    //处理事件对象兼容，包括冒泡和阻止默认事件传播两个方法
    event = event || fixEvent(window.event);
    var handlers = this.events[type];

    for(var i in handlers){
        //为了保证正确的上下文,即发生事件的dom元素
        this.$$handleEvent = handlers[i];
        //如果上面传进来的函数返回值为false,则结果为了保持一致，也要为false
        if(this.$$handleEvent(event) === false){
            return returnValue = false;
        }
    }
  
    return returnValue；
}

function fixEvent(event){
    //添加w3c事件对象方法兼容,返回的对象时具有兼容性的event
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
}
 //处理ie下event兼容
fixEvent.preventDefault = function (){
    this.returnValue = false;
}
fixEvent.stopPropagation = function(){
    this.cancelBubble = true;
};

//移除事件处理函数
function removeEvent(element, type, handler){
    if(element.events  && element.events[type])
        delete  element.events[type][handler.$$guid]
}