常用的JavaScript自定义函数

常用的JavaScript自定义函数

JavaScript自定义函数在平时的开发过程中比较实用，这里介绍的是个最常用的十个JavaScript自定义函数主要涉及添加事件与移除事件等等。

(10)addEvent

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

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

2.if (elm.addEventListener) {

3. elm.addEventListener(evType, fn, useCapture);//DOM2.0

4.return true;

5. }

6.else if (elm.attachEvent) {

7. var r = elm.attachEvent('on' + evType, fn);//IE5+

8.return r;

9. }

10.else {

11. elm['on' + evType] = fn;//DOM 0

12. }

13.}

下面是Dean Edwards 的版本

14.// addEvent/removeEvent written by Dean Edwards, 2005

15.// with input from Tino Zijdel

16.// /weblog/2005/10/add-event/

17.function addEvent(element, type, handler) {

18.//为每一个事件处理函数分派一个唯一的ID

19.if (!handler.$$guid) handler.$$guid = addEvent.guid++;

20.//为元素的事件类型创建一个哈希表

21.if (!element.events) element.events = {};

22.//为每一个"元素/事件"对创建一个事件处理程序的哈希表

23. var handlers = element.events[type];

24.if (!handlers) {

25. handlers = element.events[type] = {};

26.//存储存在的事件处理函数(如果有)

27.if (element["on" + type]) {

28. handlers[0] = element["on" + type];

29. }

30. }

31.//将事件处理函数存入哈希表

32. handlers[handler.$$guid] = handler;

33.//指派一个全局的事件处理函数来做所有的工作

34. element["on" + type] = handleEvent;

35.};

36.//用来创建唯一的ID的计数器

37.addEvent.guid = 1;

38.function removeEvent(element, type, handler) {

39.//从哈希表中删除事件处理函数

40.if (element.events && element.events[type]) {

41. delete element.events[type][handler.$$guid];

42. }

43.};

44.function handleEvent(event) {

45. var returnValue = true;

46.//抓获事件对象(IE使用全局事件对象)

47.event = event || fixEvent(window.event);

48.//取得事件处理函数的哈希表的引用

49. var handlers = this.events[event.type];

50.//执行每一个处理函数

51.for (var i in handlers) {

52.this.$$handleEvent = handlers[i];

53.if (this.$$handleEvent(event) === false) {

54. returnValue = false;

55. } }

56.return returnValue;

57.};

58.//为IE的事件对象添加一些“缺失的”函数

59.function fixEvent(event) {

60.//添加标准的W3C方法

61.event.preventDefault = fixEvent.preventDefault;

62.event.stopPropagation = fixEvent.stopPropagation;

63.return event;

64.};

65.fixEvent.preventDefault = function() {

66.this.returnValue = false;

67.};

68.fixEvent.stopPropagation = function() {

69.this.cancelBubble = true;

70.};

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

另，我还珍藏了一个HTML5工作组的版本：

71.var addEvent=(function(){

72.if(document.addEventListener){

73.return function(el,type,fn){

74.if(el.length){

75.for(var i=0;i

76. addEvent(el[i],type,fn);

77. }

78. }else{

79. el.addEventListener(type,fn,false);

80. }

81. };

82. }else{

83.return function(el,type,fn){

84.if(el.length){

85.for(var i=0;i

86. addEvent(el[i],type,fn);

87. }

88. }else{

89. el.attachEvent('on'+type,function(){

90.return fn.call(el,window.event);

91. });

92. }

93. };

94. }

95.})();

（9）addLoadEvent()