域名频道-专业提供域名注册，网站空间，电子邮箱，VPS主机等服务
首页 域名注册 虚拟主机 香港主机 美国主机 VPS主机 网站建设 ShopEX网店 软件开发 客户中心 购物车
域名服务，域名注册 常见问题
文章搜索


本类TOP10
·松江网页设计_松江网页制...
·上海轨道交通图－上海地图
·松江公交线路图－松江地图
·marquee连续滚动
·今天几度？－天气预报－全...
·松江新城地图－松江地图
·松江城区地图－松江地图
·HAO123邮箱登陆代码
·shopex免费模板,下...
·松江DNS服务器地址，松...
当前位置：域名频道首页 > 常见问题 > 网页制作
javascript十个最常用的自定义函数

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

（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报废之日，它就无用了。无忧里有它的实现原理讲解。由于太长，就不粘出来了，具体可到原作者网站看看。
来自:cnblogs 时间:2009-9-3 返回 常见问题 首页
关于我们 联系方式 付款事宜 招聘启事 网站地图 域名注册 虚拟主机 法律顾问

Copyright 2000-2013 域名频道(www.DNS110.com)
 地址：上海市松江区新松江路1188弄37号 邮编：201620
电话：021-67820741 67820742 67820743 传真：转分机805 值班电话：021-67820743
QQ：219854 Email：support@dns110.com