<!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(){
? ? ? ?alert("Lee");
? ?})
? ?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>
