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

说到原生浏览器事件函数处理兼容,大家可能会想到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] }

总结:以上方法也是jquery源码中Event模块中add的方法的借鉴来源,资料来源于此博客http://dean.edwards.name/weblog/2005/10/add-event/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值