PHP程序员站--PHP编程开发平台
 当前位置:主页 >> 网页制作 >> Javascript >> 

javascript十个最常用的自定义函数

javascript十个最常用的自定义函数

来源:互联网  作者:  发布时间:2009-09-03
如果不使用类库或者没有自己的类库,储备一些常用函数总是有好

如果不使用类库或者没有自己的类库,储备一些常用函数总是有好处的。

(10)addEvent

网上最流行的版本是Scott Andrew的,据说javascript界曾举行一场比赛(此事件我们可以在Pro Javascript Techniques第100页看到)或浏览PPK的网站,征求添加事件与移除事件的函数,他就是其获奖者。下面就是他的实现:

01.function addEvent(elm, evType, fn, useCapture) {

02.  if (elm.addEventListener) {
03.    elm.addEventListener(evType, fn, useCapture);//DOM2.0
04.    return true;
05.  }
06.  else if (elm.attachEvent) {
07.    var r = elm.attachEvent('on' + evType, fn);//IE5+
08.    return r;
09.  }
10.  else {
11.    elm['on' + evType] = fn;//DOM 0
12.  }
13.}

下面是Dean Edwards 的版本

01.function addEvent(elm, evType, fn, useCapture) {
02.  if (elm.addEventListener) {
03.    elm.addEventListener(evType, fn, useCapture);//DOM2.0
04.    return true;
05.  }
06.  else if (elm.attachEvent) {
07.    var r = elm.attachEvent('on' + evType, fn);//IE5+
08.    return r;
09.  }
10.  else {
11.    elm['on' + evType] = fn;//DOM 0
12.  }
13.}

下面是Dean Edwards 的版本

01.// addEvent/removeEvent written by Dean Edwards, 2005
02.// with input from Tino Zijdel
03.// http://dean.edwards.name/weblog/2005/10/add-event/
04.function addEvent(element, type, handler) {
05.    //为每一个事件处理函数分派一个唯一的ID
06.    if (!handler.$$guid) handler.$$guid = addEvent.guid++;
07.    //为元素的事件类型创建一个哈希表
08.    if (!element.events) element.events = {};
09.    //为每一个"元素/事件"对创建一个事件处理程序的哈希表
10.    var handlers = element.events[type];
11.    if (!handlers) {
12.        handlers = element.events[type] = {};
13.        //存储存在的事件处理函数(如果有)
14.        if (element["on" + type]) {
15.            handlers[0] = element["on" + type];
16.        }
17.    }
18.    //将事件处理函数存入哈希表
19.    handlers[handler.$$guid] = handler;
20.    //指派一个全局的事件处理函数来做所有的工作
21.    element["on" + type] = handleEvent;
22.};
23.//用来创建唯一的ID的计数器
24.addEvent.guid = 1;
25.function removeEvent(element, type, handler) {
26.    //从哈希表中删除事件处理函数
27.    if (element.events && element.events[type]) {
28.        delete element.events[type][handler.$$guid];
29.    }
30.};
31.function handleEvent(event) {
32.    var returnValue = true;
33.    //抓获事件对象(IE使用全局事件对象)
34.    event = event || fixEvent(window.event);
35.    //取得事件处理函数的哈希表的引用
36.    var handlers = this.events[event.type];
37.    //执行每一个处理函数
38.    for (var i in handlers) {
39.        this.$$handleEvent = handlers[i];
40.        if (this.$$handleEvent(event) === false) {
41.            returnValue = false;
42.        }
43.    }
44.    return returnValue;
45.};
46.//为IE的事件对象添加一些“缺失的”函数
47.function fixEvent(event) {
48.    //添加标准的W3C方法
49.    event.preventDefault = fixEvent.preventDefault;
50.    event.stopPropagation = fixEvent.stopPropagation;
51.    return event;
52.};
53.fixEvent.preventDefault = function() {
54.    this.returnValue = false;
55.};
56.fixEvent.stopPropagation = function() {
57.    this.cancelBubble = true;
58.};

功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。

另,我还珍藏了一个HTML5工作组的版本:

01.var addEvent=(function(){
02.    if(document.addEventListener){
03.        return function(el,type,fn){
04.            if(el.length){
05.                for(var i=0;i<el.length;i++){
06.                    addEvent(el[i],type,fn);
07.                }
08.            }else{
09.                el.addEventListener(type,fn,false);
10.            }
11.        };
12.    }else{
13.        return function(el,type,fn){
14.            if(el.length){
15.                for(var i=0;i<el.length;i++){
16.                    addEvent(el[i],type,fn);
17.                }
18.            }else{
19.                el.attachEvent('on'+type,function(){
20.                    return fn.call(el,window.event);
21.                });
22.            }
23.        };
24.    }
25.})();

(9)addLoadEvent()

我以前讨论过这函数,不细说,就是慢了一点,各大类库基本无视它,自行实现domReady版本。下面是Simon Willison 的实现:

 

01.var addLoadEvent = function(fn) {
02.  var oldonload = window.onload;
03.  if (typeof window.onload != 'function') {
04.    window.onload = fn;
05.  }else {
06.    window.onload = function() {
07.      oldonload();
08.      fn();
09.    }
10.  }
11.}

 

(8) getElementsByClass()

我有收集癖,手头上拥有许多版本,最后集思广益自己实现了一个。下面是我的实现:

 

01.var getElementsByClassName = function (searchClass, node,tag) {
02.    if(document.getElementsByClassName){
03.        return  document.getElementsByClassName(searchClass)
04.    }else{
05.        node = node || document;
06.        tag = tag || "*";
07.        var classes = searchClass.split(" "),
08.        elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
09.        patterns = [],
10.        returnElements = [],
11.        current,
12.        match;
13.        var i = classes.length;
14.        while(--i >= 0){
15.            patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
16.        }
17.        var j = elements.length;
18.        while(--j >= 0){
19.            current = elements[j];
20.            match = false;
21.            for(var k=0, kl=patterns.length; k<kl; k++){
22.                match = patterns[k].test(current.className);
23.                if (!match)  break;
24.            }
25.            if (match)  returnElements.push(current);
26.        }
27.        return returnElements;
28.    }
29.}

 (7)cssQuery()

别名为getElementsBySeletor,由Dean Edwards最先实现,Prototype.js,JQuery等类库都有相应实现,其中JQuery把它整合到$()选择器中,名声盖过其前辈。不过IE8等新锐浏览器已经实现querySelector与querySelectorAll方法,待到IE6与IE7报废之日,它就无用了。无忧里有它的实现原理讲解。由于太长,就不粘出来了,具体可到原作者网站看看。


延伸阅读:
javascript 事件函数
javascript 加密解密函数详解
常用JavaScript判断函数
javascript函数默认参数的设定方法
JavaScript数组系列函数应用

Tags: js   javascript   函数   function   javascript   函数   java   ip   C   as   自定义  
最新文章
推荐阅读
月点击排行榜
PHP程序员站 Copyright © 2007-2010,PHPERZ.COM All Rights Reserved 粤ICP备07503606号