<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />-->
<title></title>
<style type="text/css">
.red{width:100px;height:100px;background:red;}
.blue{width:100px;height:100px;background:blue;}
</style>
<script type="text/javascript">
/*window.onload=function(){
alert("Lee");
}
if(typeof window.onload=="function"){
var saved=null;
saved=window.onload;
}
window.onload=function(){
if(saved){
saved();
alert("Mr.Lee");
}*/
//傳統綁定機制
/* window.onload=function(){
var box=document.getElementById("box");
box.onclick=function() {
alert("Lee");
toRed().call(this);
}
function toRed(){
// alert(this)
this.className="red";
this.onclick=toBlue;
function toBlue(){
this.className="blue";
this.onclick=toRed;
*/
/* window["onload"]=function(){
alert("Lee");
}*/
/* 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(){
})
addEvent(window,"load",function(){
alert("Leesss");
})*/
*****************風格線*********這裡才是本章高潮處*******************************************************************
//當不斷點選的時候，浏覽器就會卡死，并且報錯：too muchrecursion，太多的遞歸
//因為積累了太多儲存的事件
//解決方案，就是用完事件就立即清除
//移除事件
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.call(this);//先執行上一個事件
fn.call(this);//這兩個地方要加個call呢 不然一會this就指向window了
addEvent(window,‘load‘,function(){
var box=document.getElementById("box");
addEvent(box,‘click‘,toRed); //this 沒有傳遞過去
function toRed(){
this.className="red";
removeEvent(this,‘click‘);//移除事件函數
addEvent(this,‘click‘,toBlue);//添加事件函數
function toBlue(){
this.className="blue";
removeEvent(this,‘click‘);//移除事件函數
addEvent(this,‘click‘,toRed);//添加事件函數
</script>
</head>
<body>
<div id="box" class="blue">測算點</div>
</body>
</html>
