javascript页面加载与事件监听函数

http://blog.youkuaiyun.com/rainedman/article/details/6745811

在javascript编程中，经常需要设置页面加载函数和事件监听函数，为了便于广泛编程和屏蔽浏览器差异，有牛人对这种需求进行了封装，实现了更高抽象的函数。

一:页面加载函数

假设要在页面onload事件中添加两个函数f1和f2.如果这么写window.οnlοad=f1;window.οnlοad=f2.那么这个事件只能触发一个函数(后面的那个)。如何才能添加两个呢？可以这样

[javascript]  view plain  copy

1. window.onload = function(){  
2. f1();  
3. f2();  
4. }  

但是这样写不能跨浏览器，并且也不能让人觉得非常专业。于是便有了下面非常牛X的方式

[javascript]  view plain  copy

1. var baseLib = {//基础类库函数，用于实现添加页面加载函数  
2.                 addLoadListener:function(fn){  
3.                     if (typeof window.addEventListener != 'undefined'){  
4.                         window.addEventListener('load', fn, false);  
5.                     }else if (typeof document.addEventListener != 'undefined'){  
6.                         document.addEventListener('load', fn, false);  
7.                     }else if (typeof window.attachEvent != 'undefined'){  
8.                         window.attachEvent('onload', fn);  
9.                     }else{  
10.                         var oldfn = window.onload;  
11.                         if (typeof window.onload != 'function')    window.onload = fn;  
12.                         else{  
13.                             window.onload = function(){  
14.                                 oldfn();  
15.                                 fn();  
16.                             };  
17.                         }  
18.                     }  
19.                 }  
20.             }  

如果需要将某个函数添加到页面加载事件中只需要：

[javascript]  view plain  copy

1. baseLib.addLoadListener(f1);  
2.             baseLib.addLoadListener(f2);  
3.             baseLib.addLoadListener(function(){  
4.                 alert("gagagaga");  
5.             });  

这样在任何需要添加的时候只需要调用baseLib.addLoadListener()函数即可。

二，注册事件监听函数

之前曾经提到过，要给某个DOM节点注册事件监听方式有这样两种：

1.直接在节点上注明属性，如<div id="container" οnclick="show()">

2.代码注册监听，如document.getElementById('container').onclick = show;

现在要介绍一种值得向别人炫耀的方式来实现事件监听：

[javascript]  view plain  copy

1. var baseLib = {//基础类库函数，用于实现添加页面加载函数  
2.                 addEventListener:function(target, eventType, functionRef, capture){  
3.                     if (typeof target.addEventListener != 'undefined')target.addEventListener(eventType, functionRef, capture);  
4.                     else if (typeof target.attachEvent != 'undefined')target.attachEvent('on' + eventType, functionRef);  
5.                     else{  
6.                         eventType = 'on' + eventType;  
7.                         if (typeof target[eventType] == 'function'){  
8.                             var oldListener = target[eventType];  
9.                             target[eventType] = function(){  
10.                                 oldListener();  
11.                                 return functionRef();  
12.                             }  
13.                         }else target[eventType] = functionRef;  
14.                     }     
15.                     return true;  
16.                 }  
17.             }  

说明：参数一target：需要注册事件监听的DOM节点

参数二eventType：事件类型，如load,click

参数三functionRef:需要注册的函数名

参数四capture:bool值，不知道什么意思

例如，要给页面的单击事件注册一个函数，可以这样写代码

[javascript]  view plain  copy

1. baseLib.addEventListener(document,"click",clickFn,false);  

这样在页面上单击的时候就会触发clickFn函数