javascript頁面加載與事件監聽函數

在javascript編程中，經常需要設置頁面加載函數和事件監聽函數，爲了便於廣泛編程和屏蔽瀏覽器差異，有牛人對這種需求進行了封裝，實現了更高抽象的函數。

一:頁面加載函數

假設要在頁面onload事件中添加兩個函數f1和f2.如果這麼寫window.onload=f1;window.onload=f2.那麼這個事件只能觸發一個函數(後面的那個)。如何才能添加兩個呢？可以這樣

window.onload = function(){
f1();
f2();
}

但是這樣寫不能跨瀏覽器，並且也不能讓人覺得非常專業。於是便有了下面非常牛X的方式

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();
                            };
                        }
                    }
                }
            }

如果需要將某個函數添加到頁面加載事件中只需要：

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;

現在要介紹一種值得向別人炫耀的方式來實現事件監聽：

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值，不知道什麼意思

例如，要給頁面的單擊事件註冊一個函數，可以這樣寫代碼

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

這樣在頁面上單擊的時候就會觸發clickFn函數