日期:2014-05-16  浏览次数:20406 次

最常用的javascript自定义函数

如果不使用类库或者没有自己的类库,储备一些常用函数总是有好处的。以下的函数就是我们平时用的各个库(Jquery,dojo,Prototype等)里封装好的平时没去关心的函数罢了

(1)addEvent

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<el.length;i++){
??????????????????? addEvent(el[i],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[i],type,fn);
??????????????? }
??????????? }else{
??????????????? el.attachEvent(‘on‘+type,function(){
??????????????????? return fn.call(el,window.event);
??????????????? });
??????????? }
??????? };
??? }
})();
(2)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();
????? }
??? }
? }
(3) getElementsByClass()


var getElementsByClassName = function (searchClass, node,tag) {
??? if(document.getElementsByClassName){
??????? return? document.getElementsByClassName(searchClass)