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

http://blog.csdn.net/rainedman/article/details/6745811

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

一:页面加载函数

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

[javascript] view
plain copy

window.onload = function(){  

f1();  

f2();  

}  

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

[javascript] view
plain copy

var baseLib = {//基础类库函数，用于实现添加页面加载函数  

                addLoadListener:function(fn){  

                    if (typeof window.addEventListener != 'undefined'){  

                        window.addEventListener('load', fn, false);  

                    }else if (typeof document.addEventListener != 'undefined'){  

                        document.addEventListener('load', fn, false);  

                    }else if (typeof window.attachEvent != 'undefined'){  

                        window.attachEvent('onload', fn);  

                    }else{  

                        var oldfn = window.onload;  

                        if (typeof window.onload != 'function')    window.onload = fn;  

                        else{  

                            window.onload = function(){  

                                oldfn();  

                                fn();  

                            };  

                        }  

                    }  

                }  

            }  

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

[javascript] view
plain copy

baseLib.addLoadListener(f1);  

            baseLib.addLoadListener(f2);  

            baseLib.addLoadListener(function(){  

                alert("gagagaga");  

            });  

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

二，注册事件监听函数

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

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

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

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

[javascript] view
plain copy

var baseLib = {//基础类库函数，用于实现添加页面加载函数  

                addEventListener:function(target, eventType, functionRef, capture){  

                    if (typeof target.addEventListener != 'undefined')target.addEventListener(eventType, functionRef, capture);  

                    else if (typeof target.attachEvent != 'undefined')target.attachEvent('on' + eventType, functionRef);  

                    else{  

                        eventType = 'on' + eventType;  

                        if (typeof target[eventType] == 'function'){  

                            var oldListener = target[eventType];  

                            target[eventType] = function(){  

                                oldListener();  

                                return functionRef();  

                            }  

                        }else target[eventType] = functionRef;  

                    }     

                    return true;  

                }  

            }  

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

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

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

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

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

[javascript] view
plain copy

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

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