javascript 事件绑定及深入(一)

//传统绑定
window.onload = function(){
	var box = document.getElementById("box");
	box.onclick = function(){
		alert("Lee");
	};

};


window.onload = function(){
	alert("Lee");
};

window.onload = function(){
	alert("Mr.Lee");
};

//如果一个页面有两个或多个js，并且第一个js是第一个程序员开发的，
//第二个JS是第二个程序员开发的
//第一个window.onload被覆盖了


//alert(window.onload);         //一开始没有注册window.onload，那么就是null

window.onload = function(){
	//alert("Lee");
};

//如果已经有window.onload 会打印函数
alert(window.onload);

window.onload = function(){
	//alert("Mr.Lee");
};


//alert(typeof window.onload);    //一开始没有window.onload，旧版火狐显示undefined，新版显示object
                                //谷歌和IE浏览器显示object
window.onload = function(){
	//alert("Lee");
};

//如果有window.onload，所有浏览器都会显示function
alert(typeof window.onload);


window.onload = function(){
	//alert("Mr.Lee");
};



window.onload = function(){
	alert("Lee");
};

if(typeof window.onload == "function"){
	var saved = null;  //保存上一个事件对象	
	saved = window.onload;
	
}

//saved就是window.onload,saved()相当于window.onload(),但是window.onload()不能执行的
//所以savnd()相当于window.onload = function(){};

window.onload = function(){
	if(saved){ //执行上一个事件 window.onload = function(){}
		saved();
	}          
	alert("Mr.Lee");  //执行本事件
};

//事件切换器
window.onload = function(){
	var box = document.getElementById("box");
	//box.onclick = function(){   被覆盖
	//	alert("Lee");
	//};
	
	box.onclick = function(){
		alert("Lee");
		toBlue.call(this);       //通过匿名函数执行某一个函数，那么里面的this就代表window,
		                         //可以call来传递this
	};

};


function toRed(){
	this.className = "red";
	this.onclick = toBlue;

}

function toBlue(){
	
	this.className = "blue";
	this.onclick = toRed;           //这里的onclick又把alert("Lee")覆盖掉了
}

//如果toBlue()绑定了box.onclick,里面的this代表了box,
//如果全局执行，那么this表示window

//对象操作可以使用数组操作来完成,window.onload 相当于window["onload"];
window["onload"] = function(){
	alert("Lee");
};


//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){};
function addEvent(obj,type,fn){
	//用于保存上一个事件
	var saved = null;
	//判断事件是否存在
	if(typeof obj["on" + type] == "function"){
		saved = obj["on" + type];             //保存上一个事件
	}
	
	//执行事件
	obj["on" + type] = function(){
		if(saved){
			saved();
		}
		
		fn();
	};
}

addEvent(window,"load",function(){
	alert("Lee");
});

addEvent(window,"load",function(){

	alert("Mr.Lee");
});

addEvent(window,"load",function(){

	alert("Miss.Lee");
});

//添加事件函数
//obj相当于window
//type相当于onload
//fn相当于function(){};
function addEvent(obj,type,fn){
	//用于保存上一个事件
	var saved = null;
	//判断事件是否存在
	if(typeof obj["on" + type] == "function"){
		saved = obj["on" + type];             //保存上一个事件
		
	}
	
	//执行事件
	obj["on" + type] = function(){
		if(saved){
			saved();
		}
		
		fn.call(this);
		//把this传递进去
		//在匿名函数内调用一个函数其中里面的this是全局的
	};
}

addEvent(window,"load",function(){
	var box = document.getElementById("box");
	
	addEvent(box,"click",function(){    //目的达到，每次都执行，不影响
		alert("Lee");
	});
	
	addEvent(box,"click",toBlue);

});

function toRed(){
	this.className = "red";
	removeEvent(this,"click");
	addEvent(this,"click",toBlue);
}

function toBlue(){
	this.className = "blue";
	removeEvent(this,"click");
	addEvent(this,"click",toRed);
}
//当不停的切换的时候，浏览器突然卡死，并且报错：too much recursion,
//太多的递归
//因为积累了太多的保存的事件
//解决方案，就是用完的事件，就立即移除掉
function removeEvent(obj,type){
	if(obj["on" + type]){
		obj["on" + type] = null;
	}
}





function addEvent(obj,type,fn){
	//用于保存上一个事件
	var saved = null;
	//判断事件是否存在
	if(typeof obj["on" + type] == "function"){
		saved = obj["on" + type];             //保存上一个事件
		
	}
	
	//执行事件
	obj["on" + type] = function(){
		if(saved){
			saved();
		}
		
		fn.call(this);
		//把this传递进去
		//在匿名函数内调用一个函数其中里面的this是全局的
	};
}

addEvent(window,"load",init);
addEvent(window,"load",init);   //这里是第二次注册

function init(){
	alert("Lee");
}