前面我們通過(guò)《結(jié)合實(shí)例詳細(xì)介紹javascript中l(wèi)oad事件使用方法》介紹過(guò)頁(yè)面在加載過(guò)程中響應(yīng)的load事件如何使用，load的事件我們也是經(jīng)常用到的，例如：常用的計(jì)時(shí)器就是頁(yè)面一加載就開(kāi)始計(jì)時(shí)，接下來(lái)南昌網(wǎng)站制作公司百恒網(wǎng)絡(luò)開(kāi)發(fā)工程師向大家介紹unload事件、resize事件、scroll事件幾個(gè)常用的事件。
? ? ? ?1.unload 事件
? ? ? 與 load 事件對(duì)應(yīng)的是 unload 事件，這個(gè)事件在文檔被完全卸載后觸發(fā)。只要用戶從一個(gè)頁(yè)面切
換到另一個(gè)頁(yè)面，就會(huì)發(fā)生 unload 事件。而利用這個(gè)事件最多的情況是清除引用，以避免內(nèi)存泄漏。 與 load 事件類似，也有兩種指定 onunload 事件處理程序的方式。第一種方式是使用 JavaScript，如
下所示：
? ? ? EventUtil.addHandler(window, "unload", function(event){
? ? ? ? ? ? alert("Unloaded");
? ? ? });
? ? ? 此時(shí)生成的 event 對(duì)象在兼容 DOM的瀏覽器中只包含 target 屬性（值為 document）。IE8 及之
前版本則為這個(gè)事件對(duì)象提供了 srcElement 屬性。
? ? ? 指定事件處理程序的第二種方式，也是為元素添加一個(gè)特性（與 load 事件相似），如下面的例子所示：
? ? ?
? ? ?
? ? ?
? ? ? ? ? ?
? ? ?
? ? ?
? ? ?
? ? ?
? ? ? 無(wú)論使用哪種方式，都要小心編寫 onunload 事件處理程序中的代碼。既然 unload 事件是在一切
都被卸載之后才觸發(fā)，那么在頁(yè)面加載后存在的那些對(duì)象，此時(shí)就不一定存在了。此時(shí)，操作 DOM節(jié) 點(diǎn)或者元素的樣式就會(huì)導(dǎo)致錯(cuò)誤。
2.resize 事件
? ? ? 當(dāng)瀏覽器窗口被調(diào)整到一個(gè)新的高度或?qū)挾葧r(shí)，就會(huì)觸發(fā) resize 事件。這個(gè)事件在 window（窗
口）上面觸發(fā)，因此可以通過(guò) JavaScript 或者元素中的 onresize 特性來(lái)指定事件處理程序。如前所述，我們還是推薦使用如下所示的 JavaScript 方式：
? ? ? EventUtil.addHandler(window, "resize", function(event){
? ? ? ? ? ? alert("Resized");
? ? ? });
? ? ? 與其他發(fā)生在 window 上的事件類似，在兼容 DOM 的瀏覽器中，傳入事件處理程序中的 event 對(duì) 象有一個(gè) target 屬性，值為 document；而 IE8 及之前版本則未提供任何屬性。
? ? ? 關(guān)于何時(shí)會(huì)觸發(fā) resize 事件，不同瀏覽器有不同的機(jī)制。IE、Safari、Chrome 和 Opera 會(huì)在瀏覽
器窗口變化了 1 像素時(shí)就觸發(fā) resize 事件，然后隨著變化不斷重復(fù)觸發(fā)。Firefox 則只會(huì)在用戶停止調(diào) 整窗口大小時(shí)才會(huì)觸發(fā) resize 事件。由于存在這個(gè)差別，應(yīng)該注意不要在這個(gè)事件的處理程序中加入 大計(jì)算量的代碼，因?yàn)檫@些代碼有可能被頻繁執(zhí)行，從而導(dǎo)致瀏覽器反應(yīng)明顯變慢。
scroll 事件
? ? ? 雖然 scroll 事件是在 window 對(duì)象上發(fā)生的，但它實(shí)際表示的則是頁(yè)面中相應(yīng)元素的變化。在混
雜模式下，可以通過(guò)元素的 scrollLeft 和 scrollTop 來(lái)監(jiān)控到這一變；；而在標(biāo)準(zhǔn)模式下，
除 Safari 之外的所有瀏覽器都會(huì)通過(guò)元素來(lái)反映這一變化（Safari 仍然基于跟蹤滾動(dòng)位 置），如下面的例子所示：
? ? ? EventUtil.addHandler(window, "scroll", function(event){
? ? ? ? ? ? if (document.compatMode == "CSS1Compat"){
? ? ? ? ? ? ? ? ? alert(document.documentElement.scrollTop);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? alert(document.body.scrollTop);
? ? ? ? ? ? }
? ?});
? ? ? 以上代碼指定的事件處理程序會(huì)輸出頁(yè)面的垂直滾動(dòng)位置——根據(jù)呈現(xiàn)模式不同使用了不同的元 素。由于 Safari 3.1 之前的版本不支持 document.compatMode，因此舊版本的瀏覽器就會(huì)滿足第二個(gè) 條件。
? ? ? 與 resize 事件類似，scroll 事件也會(huì)在文檔被滾動(dòng)期間重復(fù)被觸發(fā)，所以有必要盡量保持事件
處理程序的代碼簡(jiǎn)單。
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.51yjwy.com/如轉(zhuǎn)載請(qǐng)注明出處!