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