多重事件
如果不使用类库或者没有自己的类库,储备一些常用函数总是有好处的。(10)addEvent
网上最流行的版本是Scott Andrew的,据说javascript界曾举行一场比赛(此事件我们可以在Pro Javascript Techniques第100页看到)或浏览PPK的网站,征求添加事件与移除事件的函数,他就是其获奖者。下面就是他的实现:
function addEvent(elm, evType, fn, useCapture) {if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture);//DOM2.0 return true;}else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn);//IE5+ return r;}else { elm['on' + evType] = fn;//DOM 0}}
下面是Dean Edwards 的版本
// addEvent/removeEvent written by Dean Edwards, 2005// with input from Tino Zijdel// http://dean.edwards.name/weblog/2005/10/add-event/function addEvent(element, type, handler) { //为每一个事件处理函数分派一个唯一的ID if (!handler.$$guid) handler.$$guid = addEvent.guid++; //为元素的事件类型创建一个哈希表 if (!element.events) element.events = {}; //为每一个"元素/事件"对创建一个事件处理程序的哈希表 var handlers = element.events; if (!handlers) { handlers = element.events = {}; //存储存在的事件处理函数(如果有) if (element["on" + type]) { handlers = element["on" + type]; } } //将事件处理函数存入哈希表 handlers = handler; //指派一个全局的事件处理函数来做所有的工作 element["on" + type] = handleEvent;};//用来创建唯一的ID的计数器addEvent.guid = 1;function removeEvent(element, type, handler) { //从哈希表中删除事件处理函数 if (element.events && element.events) { delete element.events; }};function handleEvent(event) { var returnValue = true; //抓获事件对象(IE使用全局事件对象) event = event || fixEvent(window.event); //取得事件处理函数的哈希表的引用 var handlers = this.events; //执行每一个处理函数 for (var i in handlers) { this.$$handleEvent = handlers; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue;};//为IE的事件对象添加一些“缺失的”函数function fixEvent(event) { //添加标准的W3C方法 event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event;};fixEvent.preventDefault = function() { this.returnValue = false;};fixEvent.stopPropagation = function() { this.cancelBubble = true;};
功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。
另,我还珍藏了一个HTML5工作组的版本:
var addEvent=(function(){ if(document.addEventListener){ return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el,type,fn); } }else{ el.addEventListener(type,fn,false); } }; }else{ return function(el,type,fn){ if(el.length){ for(var i=0;i<el.length;i++){ addEvent(el,type,fn); } }else{ el.attachEvent('on'+type,function(){ return fn.call(el,window.event); }); } }; }})();
原文:http://www.cnblogs.com/rubylouvre/archive/2009/09/02/1558998.html
页:
[1]