日期:2014-05-16 浏览次数:20351 次
< type="text/javascript"> 如果不使用类库或者没有自己的类库,储备一些常用函数总是有好处的。 (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[type]; if (!handlers) { handlers = element.events[type] = {}; //存储存在的事件处理函数(如果有) if (element["on" + type]) { handlers[0] = element["on" + type]; } } //将事件处理函数存入哈希表 handlers[handler.$$guid] = handler; //指派一个全局的事件处理函数来做所有的工作 element["on" + type] = handleEvent; }; //用来创建唯一的ID的计数器 addEvent.guid = 1; function removeEvent(element, type, handler) { //从哈希表中删除事件处理函数 if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } }; function handleEvent(event) { var returnValue = true; //抓获事件对象(IE使用全局事件对象) event = event || fixEvent(window.event); //取得事件处理函数的哈希表的引用 var handlers = this.events[event.type]; //执行每一个处理函数 for (var i in handlers) { this.$$handleEvent = handlers[i]; 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(9)addLoadEvent() 我以前讨论过这函数,不细说,就是慢了一点,各大类库基本无视它,自行实现domReady版本。下面是Simon Willison 的实现: var addLoadEvent = function(fn) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; }else { window.onload = function() { oldonload(); fn(); } } } (8) getElementsByClass() 我有收集癖,手头上拥有许多版本,最后集思广益自己实现了一个。下面是我的实现: var getElementsByClassName = function (searchClass, node,tag) { if(document.getElementsByClassName){ return document.getElementsByClassName(searchClass) }else{ node = node || document; tag = tag || "*"; var classes = searchClass.split(" "), elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), patterns = [], returnElements = [], current, match; var i = classes.length; while(--i >= 0){ patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)")); } var j = elements.length; while(--j >= 0){ current = elements[j]; match = false; for(var k=0, kl=patterns.length; k(7)cssQuery() 别名为getElementsBySeletor,由Dean Edwards最先实现,Prototype.js,JQuery等类库都有相应实现,其中JQuery把它整合到$()选择器中,名声盖过其前辈。不过 IE8等新锐浏览器已经实现querySelector与querySelectorAll方法,待到IE6与IE7报废之日,它就无用了。无忧里有它的实现原理讲解。由于太长,就不粘出来了,具体可到原作者网站看看。 (6)toggle() 用来显示或隐藏一个DOM元素。 function t