事件處理是對(duì)象化編程的一個(gè)很重要的環(huán)節(jié)，沒(méi)有了事件處理，程序就會(huì)變得很死，缺乏靈活性。事件處理的過(guò)程可以這樣表示：發(fā)生事件 - 啟動(dòng)事件處理程序 - 事件處理程序作出反應(yīng)。其中，要使事件處理程序能夠啟動(dòng)，必須先告訴對(duì)象，如果發(fā)生了什么事情，要啟動(dòng)什么處理程序，否則這個(gè)流程就不能進(jìn)行下去。事件的處理程序可以是任意 JavaScript 語(yǔ)句，但是我們一般用特定的自定義函數(shù)（function）來(lái)處理事情。
指定事件處理程序有三種方法：
方法一 直接在 HTML 標(biāo)記中指定。這種方法是用得最普遍的。方法是：
<標(biāo)記 ... ... 事件="事件處理程序" [事件="事件處理程序" ...]>
讓我們來(lái)看看例子：
<body ... onload="alert('網(wǎng)頁(yè)讀取完成，請(qǐng)慢慢欣賞！')" onunload="alert('再見(jiàn)！')">
這樣的定義<body>標(biāo)記，能使文檔讀取完畢的時(shí)候彈出一個(gè)對(duì)話框，寫(xiě)著“網(wǎng)頁(yè)讀取完成，請(qǐng)慢慢欣賞”；在用戶退出文檔（或者關(guān)閉窗口，或者到另一個(gè)頁(yè)面去）的時(shí)候彈出“再見(jiàn)”。
方法二 編寫(xiě)特定對(duì)象特定事件的 JavaScript。這種方法用得比較少，但是在某些場(chǎng)合還是很好用的。方法是：
<script language="JavaScript" for="對(duì)象" event="事件">
...
(事件處理程序代碼)
...
</script>
例：
<script language="JavaScript" for="window" event="onload">
alert('網(wǎng)頁(yè)讀取完成，請(qǐng)慢慢欣賞！');
</script>
方法三 在 JavaScript 中說(shuō)明。方法：
<事件主角 - 對(duì)象>.<事件> = <事件處理程序>;
用這種方法要注意的是，“事件處理程序”是真正的代碼，而不是字符串形式的代碼。如果事件處理程序是一個(gè)自定義函數(shù)，如無(wú)使用參數(shù)的需要，就不要加“()”。例：
...
function ignoreError() {
return true;
}
...
window.onerror = ignoreError; // 沒(méi)有使用“()”
這個(gè)例子將 ignoreError() 函數(shù)定義為 window 對(duì)象的 onerror 事件的處理程序。它的效果是忽略該 window 對(duì)象下任何錯(cuò)誤（由引用不允許訪問(wèn)的 location 對(duì)象產(chǎn)生的“沒(méi)有權(quán)限”錯(cuò)誤是不能忽略的）。
onblur 事件 發(fā)生在窗口失去焦點(diǎn)的時(shí)候。
應(yīng)用于：window 對(duì)象
onchange 事件 發(fā)生在文本輸入?yún)^(qū)的內(nèi)容被更改，然后焦點(diǎn)從文本輸入?yún)^(qū)移走之后。捕捉此事件主要用于實(shí)時(shí)檢測(cè)輸入的有效性，或者立刻改變文檔內(nèi)容。
應(yīng)用于：Password 對(duì)象；Select 對(duì)象；Text 對(duì)象；Textarea 對(duì)象
onclick 事件 發(fā)生在對(duì)象被單擊的時(shí)候。單擊是指鼠標(biāo)停留在對(duì)象上，按下鼠標(biāo)鍵，沒(méi)有移動(dòng)鼠標(biāo)而放開(kāi)鼠標(biāo)鍵這一個(gè)完整的過(guò)程。
一個(gè)普通按鈕對(duì)象（Button）通常會(huì)有 onclick 事件處理程序，因?yàn)檫@種對(duì)象根本不能從用戶那里得到任何信息，沒(méi)有 onclick 事件處理程序就等于廢柴。按鈕上添加 onclick 事件處理程序，可以模擬“另一個(gè)提交按鈕”，方法是：在事件處理程序中更改表單的 action, target, encoding, method 等一個(gè)或幾個(gè)屬性，然后調(diào)用表單的 submit() 方法。
在 Link 對(duì)象的 onclick 事件處理程序中返回 false 值（return false），能阻止瀏覽器打開(kāi)此連接。即，如果有一個(gè)這樣的連接：<a onclick="return false">Go!</a>，那么無(wú)論用戶怎樣點(diǎn)擊，都不會(huì)去到 www.a.com 網(wǎng)站，除非用戶禁止瀏覽器運(yùn)行 JavaScript。
應(yīng)用于：Button 對(duì)象；Checkbox 對(duì)象；Image 對(duì)象；Link 對(duì)象；Radio 對(duì)象；Reset 對(duì)象；Submit 對(duì)象
onerror 事件 發(fā)生在錯(cuò)誤發(fā)生的時(shí)候。它的事件處理程序通常就叫做“錯(cuò)誤處理程序”(Error Handler)，用來(lái)處理錯(cuò)誤。上邊已經(jīng)介紹過(guò)，要忽略一切錯(cuò)誤，就使用：
function ignoreError() {
return true;
}
window.onerror = ignoreError;
應(yīng)用于：window 對(duì)象
onfocus 事件 發(fā)生在窗口得到焦點(diǎn)的時(shí)候。
應(yīng)用于：window 對(duì)象
onload 事件 發(fā)生在文檔全部下載完畢的時(shí)候。全部下載完畢意味著不但 HTML 文件，而且包含的圖片，插件，控件，小程序等全部?jī)?nèi)容都下載完畢。本事件是 window 的事件，但是在 HTML 中指定事件處理程序的時(shí)候，我們是把它寫(xiě)在<body>標(biāo)記中的。
應(yīng)用于：window 對(duì)象
onmousedown 事件 發(fā)生在用戶把鼠標(biāo)放在對(duì)象上按下鼠標(biāo)鍵的時(shí)候。參考 onmouseup 事件。
應(yīng)用于：Button 對(duì)象；Link 對(duì)象
onmouseout 事件 發(fā)生在鼠標(biāo)離開(kāi)對(duì)象的時(shí)候。參考 onmouseover 事件。
應(yīng)用于：Link 對(duì)象
onmouseover 事件 發(fā)生在鼠標(biāo)進(jìn)入對(duì)象范圍的時(shí)候。這個(gè)事件和 onmouseout 事件，再加上圖片的預(yù)讀，就可以做到當(dāng)鼠標(biāo)移到圖像連接上，圖像更改的效果了。有時(shí)我們看到，在指向一個(gè)連接時(shí)，狀態(tài)欄上不顯示地址，而顯示其它的資料，看起來(lái)這些資料是可以隨時(shí)更改的。它們是這樣做出來(lái)的：
<a href="..."
onmouseover="window.status='Click Me Please!'; return true;"
onmouseout="window.status=''; return true;">
應(yīng)用于：Link 對(duì)象
onmouseup 事件 發(fā)生在用戶把鼠標(biāo)放在對(duì)象上鼠標(biāo)鍵被按下的情況下，放開(kāi)鼠標(biāo)鍵的時(shí)候。如果按下鼠標(biāo)鍵的時(shí)候，鼠標(biāo)并不在放開(kāi)鼠標(biāo)的對(duì)象上，則本事件不會(huì)發(fā)生。
應(yīng)用于：Button 對(duì)象；Link 對(duì)象
onreset 事件 發(fā)生在表單的“重置”按鈕被單擊（按下并放開(kāi)）的時(shí)候。通過(guò)在事件處理程序中返回 false 值（return false）可以阻止表單重置。
應(yīng)用于：Form 對(duì)象
onresize 事件 發(fā)生在窗口被調(diào)整大小的時(shí)候。
應(yīng)用于：window 對(duì)象
onsubmit 事件 發(fā)生在表單的“提交”按鈕被單擊（按下并放開(kāi)）的時(shí)候。可以使用該事件來(lái)驗(yàn)證表單的有效性。通過(guò)在事件處理程序中返回 false 值（return false）可以阻止表單提交。
應(yīng)用于：Form 對(duì)象
onunload 事件 發(fā)生在用戶退出文檔（或者關(guān)閉窗口，或者到另一個(gè)頁(yè)面去）的時(shí)候。與 onload 一樣，要寫(xiě)在 HTML 中就寫(xiě)到<body>標(biāo)記里。
有的 Web Masters 用這個(gè)方法來(lái)彈出“調(diào)查表單”，以“強(qiáng)迫”來(lái)者填寫(xiě)；有的就彈出廣告窗口，唆使來(lái)者點(diǎn)擊連接。我覺(jué)得這種“onunload="open..."”的方法很不好，有時(shí)甚至?xí)驗(yàn)閺棾鎏啻翱诙鴮?dǎo)致資源缺乏。有什么對(duì)來(lái)者說(shuō)就應(yīng)該在網(wǎng)頁(yè)上說(shuō)完，不對(duì)嗎？
應(yīng)用于：window 對(duì)象
現(xiàn)在我們有實(shí)力學(xué)習(xí)以下關(guān)于對(duì)象化編程，但其實(shí)屬于上一章的內(nèi)容了。
with 語(yǔ)句 為一個(gè)或一組語(yǔ)句指定默認(rèn)對(duì)象。
用法：with (<對(duì)象>) <語(yǔ)句>;
with 語(yǔ)句通常用來(lái)縮短特定情形下必須寫(xiě)的代碼量。在下面的例子中，請(qǐng)注意 Math 的重復(fù)使用：
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
當(dāng)使用 with 語(yǔ)句時(shí)，代碼變得更短且更易讀：
with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
this 對(duì)象 返回“當(dāng)前”對(duì)象。在不同的地方，this 代表不同的對(duì)象。如果在 JavaScript 的“主程序”中（不在任何 function 中，不在任何事件處理程序中）使用 this，它就代表 window 對(duì)象；如果在 with 語(yǔ)句塊中使用 this，它就代表 with 所指定的對(duì)象；如果在事件處理程序中使用 this，它就代表發(fā)生事件的對(duì)象。
一個(gè)常用的 this 用法：
<script>
...
function check(formObj) {
...
}
...
</script>
<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>
這個(gè)用法常用于立刻檢測(cè)表單輸入的有效性。
自定義構(gòu)造函數(shù) 我們已經(jīng)知道，Array()，Image()等構(gòu)造函數(shù)能讓我們構(gòu)造一個(gè)變量。其實(shí)我們自己也可以寫(xiě)自己的構(gòu)造函數(shù)。自定義構(gòu)造函數(shù)也是用 function。在 function 里邊用 this 來(lái)定義屬性。
function <構(gòu)造函數(shù)名> [(<參數(shù)>)] {
...
this.<屬性名> = <初始值>;
...
}
然后，用 new 構(gòu)造函數(shù)關(guān)鍵字來(lái)構(gòu)造變量：
var <變量名> = new <構(gòu)造函數(shù)名>[(<參數(shù)>)];
構(gòu)造變量以后，<變量名>成為一個(gè)對(duì)象，它有它自己的屬性——用 this 在 function 里設(shè)定的屬性。
以下是一個(gè)從網(wǎng)上找到的搜集瀏覽器詳細(xì)資料的自定義構(gòu)造函數(shù)的例子：
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion); //主版本號(hào)
this.minor = parseFloat(navigator.appVersion);//全版本號(hào)
this.ns = ((agent.indexOf('mozilla')!=-1) &&
((agent.indexOf('spoofer')==-1) && //是否 Netscape
(agent.indexOf('compatible') == -1)));
this.ns2 = (this.ns && (this.major == 3)); //是否 Netscape 2
this.ns3 = (this.ns && (this.major == 3)); //是否 Netscape 3
this.ns4b = (this.ns && (this.minor < 4.04)); //是否 Netscape 4 低版本
this.ns4 = (this.ns && (this.major >= 4)); //是否 Netscape 4 高版本
this.ie = (agent.indexOf("msie") != -1); //是否 IE
this.ie3 = (this.ie && (this.major == 2)); //是否 IE 3
this.ie4 = (this.ie && (this.major >= 4)); //是否 IE 4
this.op3 = (agent.indexOf("opera") != -1); //是否 Opera 3
this.win = (agent.indexOf("win")!=-1); //是否 Windows 版本
this.mac = (agent.indexOf("mac")!=-1); //是否 Macintosh 版本
this.unix = (agent.indexOf("x11")!=-1); //是否 Unix 版本
}
var is = new Is();
這個(gè)構(gòu)造函數(shù)非常完整的搜集了瀏覽器的信息。我們看到它為對(duì)象定義了很多個(gè)屬性：major, minor, ns, ie, win, mac 等等。它們的意思見(jiàn)上面的注釋。把 is 變量定義為 Is() 對(duì)象后，用 if (is.ns) 這種格式就可以很方便的知道瀏覽器的信息了。我們也可以從這個(gè)構(gòu)造函數(shù)中看到，它也可以使用一般的 JavaScript 語(yǔ)句（上例中為 var 語(yǔ)句）。
讓我們?cè)賮?lái)看一個(gè)使用參數(shù)的構(gòu)造函數(shù)：
function myFriend(theName, gender, theAge, birthOn, theJob) {
this.name = theName;
this.isMale = (gender.toLowerCase == 'male');
this.age = theAge;
this.birthday = new Date(birthOn);
this.job = theJob
}
var Stephen = new myFriend('Stephen', 'Male', 18, 'Dec 22, 1982', 'Student');
從這個(gè)構(gòu)造函數(shù)我們不但看到了參數(shù)的用法，還看到了不同的屬性用不同的數(shù)據(jù)型是可以的（上例五個(gè)屬性分別為：字符串，布爾值，數(shù)字，日期，字符串），還看到了構(gòu)造函數(shù)里也可以用構(gòu)造函數(shù)來(lái)“構(gòu)造”屬性。如果用了足夠的“保護(hù)措施”來(lái)避免無(wú)限循環(huán)，更可以用構(gòu)造函數(shù)自身來(lái)構(gòu)造自己的屬性。
在講述 window 對(duì)象的時(shí)候，我們提到過(guò)，一個(gè)框架內(nèi)的網(wǎng)頁(yè)也是 window 對(duì)象，也就是說(shuō)，F(xiàn)rame 對(duì)象也是 window 對(duì)象。用最容易理解的話說(shuō)，每一個(gè) HTML 文件占用一個(gè) window 對(duì)象，包括定義框架的網(wǎng)頁(yè)（“框架網(wǎng)頁(yè)”）。在 IE 里用“<iframe>”標(biāo)記在文檔中插入的框架也是 window 對(duì)象，但是用“包含網(wǎng)頁(yè)”的方法（在 HTML 中顯示為“<!--webbot bot="include" ...-->”）讀取的 HTML 就不占用獨(dú)自的 window 對(duì)象。每一個(gè)框架都是包含它的頁(yè)的 window 對(duì)象的一個(gè)子對(duì)象（不知道應(yīng)該叫“屬性”不該），要引用它，可以用以下幾種方法之一：
window.frames[x]
window.frames['frameName']
window.frameName
其中，x 指的是該 window 對(duì)象中指定的第幾個(gè)框架，與其它數(shù)組一樣，x 也是從零開(kāi)始的。frameName 指的是該框架的名字，跟<frame>里的“name”屬性一樣。
如果使用 window.frameName 指定的 window 對(duì)象又是一個(gè)框架網(wǎng)頁(yè)，那么引用它的框架的方法：window.frameName.subFrameName。以此類推。
要注意的時(shí)，無(wú)論在何處，引用“window”對(duì)象所返回的，都是“當(dāng)前”window 對(duì)象。如果要訪問(wèn)其它 window 對(duì)象，就要用到 parent 和 top 屬性。parent 指的是“父級(jí)”window 對(duì)象，也就是包含當(dāng)前 window 對(duì)象的框架網(wǎng)頁(yè)；top 指的是窗口最頂端的 window 對(duì)象。
使用框架還要密切留意你的 JavaScript 中定義的全局變量和自定義函數(shù)。它們都有它們的所屬——所在的 window 對(duì)象。要引用其它框架中的全局變量或自定義函數(shù)，都要用“窗口對(duì)象.框架對(duì)象[.框架對(duì)象…].全局變量或自定義函數(shù)”這種很煩的方法。
以上這個(gè)問(wèn)題在建立連接時(shí)經(jīng)常會(huì)被忽略：如果在<head>中定義了一個(gè)默認(rèn)目標(biāo)窗口（<base target="...">），在<a href="javascript:...">中，要知道輸入的 JavaScript 語(yǔ)句是在默認(rèn)目標(biāo)窗口中運(yùn)行的，必要時(shí)加一些“parent”“top”屬性。
我們已經(jīng)知道，在 document 對(duì)象中有一個(gè) cookie 屬性。但是 Cookie 又是什么？“某些 Web 站點(diǎn)在您的硬盤上用很小的文本文件存儲(chǔ)了一些信息，這些文件就稱為 Cookie。”—— MSIE 幫助。一般來(lái)說(shuō)，Cookies 是 CGI 或類似，比 HTML 高級(jí)的文件、程序等創(chuàng)建的，但是 JavaScript 也提供了對(duì) Cookies 的很全面的訪問(wèn)權(quán)利。
在繼續(xù)之前，我們先要學(xué)一學(xué) Cookie 的基本知識(shí)。
每個(gè) Cookie 都是這樣的：<cookie名>=<值>
<cookie名>的限制與 JavaScript 的命名限制大同小異，少了“不能用 JavaScript 關(guān)鍵字”，多了“只能用可以用在 URL 編碼中的字符”。后者比較難懂，但是只要你只用字母和數(shù)字命名，就完全沒(méi)有問(wèn)題了。<值>的要求也是“只能用可以用在 URL 編碼中的字符”。
每個(gè) Cookie 都有失效日期，一旦電腦的時(shí)鐘過(guò)了失效日期，這個(gè) Cookie 就會(huì)被刪掉。我們不能直接刪掉一個(gè) Cookie，但是可以用設(shè)定失效日期早于現(xiàn)在時(shí)刻的方法來(lái)間接刪掉它。
每個(gè)網(wǎng)頁(yè)，或者說(shuō)每個(gè)站點(diǎn)，都有它自己的 Cookies，這些 Cookies 只能由這個(gè)站點(diǎn)下的網(wǎng)頁(yè)來(lái)訪問(wèn)，來(lái)自其他站點(diǎn)或同一站點(diǎn)下未經(jīng)授權(quán)的區(qū)域的網(wǎng)頁(yè)，是不能訪問(wèn)的。每一“組”Cookies 有規(guī)定的總大小（大約 2KB 每“組”），一超過(guò)最大總大小，則最早失效的 Cookie 先被刪除，來(lái)讓新的 Cookie“安家”。
現(xiàn)在我們來(lái)學(xué)習(xí)使用 document.cookie 屬性。
如果直接使用 document.cookie 屬性，或者說(shuō)，用某種方法，例如給變量賦值，來(lái)獲得 document.cookie 的值，我們就可以知道在現(xiàn)在的文檔中有多少個(gè) Cookies，每個(gè) Cookies 的名字，和它的值。例如，在某文檔中添加“document.write(document.cookie)”，結(jié)果顯示：
name=kevin; email=kevin@kevin.com; lastvisited=index.html
這意味著，文檔包含 3 個(gè) Cookies：name, email 和 lastvisited，它們的值分別是 kevin, kevin@kevin.com 和 index.html。可以看到，兩個(gè) Cookies 之間是用分號(hào)和空格隔開(kāi)的，于是我們可以用 cookieString.split('; ') 方法得到每個(gè) Cookie 分開(kāi)的一個(gè)數(shù)組（先用 var cookieString = document.cookie）。
設(shè)定一個(gè) Cookie 的方法是對(duì) document.cookie 賦值。與其它情況下的賦值不同，向 document.cookie 賦值不會(huì)刪除掉原有的 Cookies，而只會(huì)增添 Cookies 或更改原有 Cookie。賦值的格式：
document.cookie = 'cookieName=' + escape('cookieValue')
+ ';expires=' + expirationDateObj.toGMTString();
是不是看到頭暈了呢？以上不是粗體字的地方是要照抄不誤的，粗體字是要按實(shí)際情況做出改動(dòng)的。cookieName 表示 Cookie 的名稱，cookieValue 表示 Cookie 的值，expirationDateObj 表示儲(chǔ)存著失效日期的日期對(duì)象名，如果不需要指定失效日期，則不需要第二行。不指定失效日期，則瀏覽器默認(rèn)是在關(guān)閉瀏覽器（也就是關(guān)閉所有窗口）之后過(guò)期。
看到了上面的一些下劃線了么？這些是應(yīng)該注意的地方。
首先 escape() 方法：為什么一定要用？因?yàn)?Cookie 的值的要求是“只能用可以用在 URL 編碼中的字符”。我們知道“escape()”方法是把字符串按 URL 編碼方法來(lái)編碼的，那我們只需要用一個(gè)“escape()”方法來(lái)處理輸出到 Cookie 的值，用“unescape()”來(lái)處理從 Cookie 接收過(guò)來(lái)的值就萬(wàn)無(wú)一失了。而且這兩個(gè)方法的最常用途就是處理 Cookies。其實(shí)設(shè)定一個(gè) Cookie 只是“document.cookie = 'cookieName=cookieValue'”這么簡(jiǎn)單，但是為了避免在 cookieValue 中出現(xiàn) URL 里不準(zhǔn)出現(xiàn)的字符，還是用一個(gè) escape() 好。
然后“expires”前面的分號(hào)：注意到就行了。是分號(hào)而不是其他。
最后 toGMTString() 方法：設(shè)定 Cookie 的時(shí)效日期都是用 GMT 格式的時(shí)間的，其它格式的時(shí)間是沒(méi)有作用的。
現(xiàn)在我們來(lái)實(shí)戰(zhàn)一下。設(shè)定一個(gè)“name=rose”的 Cookie，在 3 個(gè)月后過(guò)期。
var expires = new Date();
expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);
/* 三個(gè)月 x 一個(gè)月當(dāng)作 30 天 x 一天 24 小時(shí)
x 一小時(shí) 60 分 x 一分 60 秒 x 一秒 1000 毫秒 */
document.cookie = 'name=rose;expires=' + expires.toGMTString();
為什么沒(méi)有用 escape() 方法？這是因?yàn)槲覀冎?rose 是一個(gè)合法的 URL 編碼字符串，也就是說(shuō)，'rose' == escape('rose')。一般來(lái)說(shuō)，如果設(shè)定 Cookie 時(shí)不用 escape()，那獲取 Cookie 時(shí)也不用 unescape()。
再來(lái)一次：編寫(xiě)一個(gè)函數(shù)，作用是查找指定 Cookie 的值。
function getCookie(cookieName) {
var cookieString = document.cookie;
var start = cookieString.indexOf(cookieName + '=');
// 加上等號(hào)的原因是避免在某些 Cookie 的值里有
// 與 cookieName 一樣的字符串。
if (start == -1) // 找不到
return null;
start += cookieName.length + 1;
var end = cookieString.indexOf(';', start);
if (end == -1) return unescape(cookieString.substring(start));
return unescape(cookieString.substring(start, end));
}
這個(gè)函數(shù)用到了字符串對(duì)象的一些方法，如果你不記得了（你是不是這般沒(méi)記性啊），請(qǐng)快去查查。這個(gè)函數(shù)所有的 if 語(yǔ)句都沒(méi)有帶上 else，這是因?yàn)槿绻麠l件成立，程序運(yùn)行的都是 return 語(yǔ)句，在函數(shù)里碰上 return，就會(huì)終止運(yùn)行，所以不加 else 也沒(méi)問(wèn)題。該函數(shù)在找到 Cookie 時(shí)，就會(huì)返回 Cookie 的值，否則返回“null”。
現(xiàn)在我們要?jiǎng)h除剛才設(shè)定的 name=rose Cookie。
var expires = new Date();
expires.setTime(expires.getTime() - 1);
document.cookie = 'name=rose;expires=' + expires.toGMTString();
可以看到，只需要把失效日期改成比現(xiàn)在日期早一點(diǎn)（這里是早 1 毫秒），再用同樣的方法設(shè)定 Cookie，就可以刪掉 Cookie 了。