事件處理器作為瀏覽器對象的屬性

2024-07-21 02:04:29

字體：大中小

來源：轉載

供稿：網(wǎng)友

我們已經(jīng)介紹了對象的概念，我們可以通過定義屬性和方法來定義對象。不僅如此，對象還具有與之相關的事件。由于javascript中的內(nèi)建對象并沒有相關的事件，因此在前面的內(nèi)容中我們并沒有提到事件這個概念。但是，bom對象則具有相關的事件。

那么，bom對象都具有哪些事件呢？

當特定的操作發(fā)生或者狀態(tài)改變時，事件將被觸發(fā)。例如，當用戶在頁面上單擊時、或單擊頁面上的超鏈接時，或者當鼠標指針移過某段文字時，都可能觸發(fā)相應的事件。另外一個經(jīng)常用到的事件是頁面的load事件，當頁面加載時將觸發(fā)這個事件。

那么，事件對我們有什么用呢？

為了說明事件的作用，讓我們來看一個例子，當用戶在頁面上的任何地方單擊鼠標時，我們希望彈出一個菜單。假定我們寫好了產(chǎn)生彈出菜單的函數(shù)，但是我們怎么知道什么時候讓菜單彈出呢？或者換句話說，我們什么時候調用這個產(chǎn)生彈出菜單的函數(shù)呢？因此，我們需要以某種方法捕獲用戶單擊頁面的事件，并且確保一旦單擊頁面的事件發(fā)生時，產(chǎn)生彈出菜單的函數(shù)即被調用。

為了實現(xiàn)這個功能，需要使用一種稱為事件處理器(event handler)的機制。當事件發(fā)生時，事件處理器將連接到需要執(zhí)行的事件處理代碼。事件處理器提供了當事件發(fā)生時捕獲事件、并且執(zhí)行相應的事件處理程序的機制。通常我們把在代碼中加入事件處理器稱為“將事件處理代碼連接到事件”。這有點類似于設置一個鬧鐘—— 當某個事件發(fā)生時，使鬧鐘振鈴。對于一個鬧鐘來說，這個觸發(fā)事件就是當?shù)竭_某一確定的時間點時。

事件處理器由關鍵字on加上要處理的事件名組成。例如，click事件的事件處理器為onclick，load事件的事件處理器為onload。

相關文章：將事件處理器作為html標記的屬性

通過事件處理器，可以使用多種方法將事件處理代碼連接到事件。在本章中，我們將介紹兩種最簡單的辦法。這兩種方法不但被當前的瀏覽器所支持，而且自netscape 2瀏覽器就開始使用，甚至更早的瀏覽器也支持這兩種方法。在第12章中將介紹其他較新的且更加易于標準化的添加事件的方法。

將事件處理器作為瀏覽器對象的屬性

下面來看一看將事件處理代碼連接到事件的第二種方法。

對于第二種方法，首先需要定義當事件發(fā)生時所要執(zhí)行的函數(shù)。然后，再把相應對象的事件處理器屬性設置為我們所定義的函數(shù)。

下面用一個例子進行說明：

<html>

<body>

function linksomepage_onclick()

{

alert('this link is going nowhere');

return false;

}

</script>

click me

</a>

window.document.links[0].onclick = linksomepage_onclick;

</script>

</body>

</html>

將上面的代碼保存為ch5_examp4.htm文件。

與上一個例子類似，我們定義了一個linksomepage_onclick()函數(shù)。并用該函數(shù)的返回值指出我們是否希望執(zhí)行事件的默認行為。

接下來定義了一個<a>標記，我們要捕獲的正是<a>標記的click事件。注意，在該標記中并沒有定義任何包含事件處理器或函數(shù)的屬性。

事件處理函數(shù)與對象事件處理器的連接是通過腳本的最后一行代碼來實現(xiàn)的，如下面的代碼所示：

document.links[0].onclick = linksomepage_onclick;

</script>

我們已經(jīng)知道，document.links[0]將返回對應于頁面上第一個超鏈接的a對象，即名為linksomepage的超鏈接對象。只需將該超鏈接對象的onclick屬性設置為我們所定義的事件處理函數(shù)linksomepage_onclick—— 這樣就可以將事件處理函數(shù)連接到對象的事件處理器。注意，此處在函數(shù)名之后并沒有一對圓括號。當用戶單擊超鏈接之后，事件處理函數(shù)linksomepage_onclick()就會被執(zhí)行。

第一種方法相對來說更加簡單，那么什么時候應該使用第二種方法呢？

使用第二種方法最常見的情況就是，當需要捕獲某個對象的事件，但是這個對象并沒有直接的html標記來添加事件處理器屬性，這時就需要使用第二種方法。另外，當我們想通過代碼動態(tài)地改變某個事件處理器所連接的事件處理函數(shù)時，使用第二種方法則比較有效。

下面來看一看另外一個例子，在下面的例子中，將圖片的click事件連接到一個事件處理函數(shù)，以隨機地改變頁面上所顯示的圖片。

<html>

<head>

var myimages = new array("usa.gif","canada.gif","jamaica.gif","mexico.gif");

function changeimg(imgnumber)

{

var imgclicked = document.images[imgnumber];

var newimgnumber = math.round(math.random() * 3);

while (imgclicked.src.indexof(myimages[newimgnumber]) != -1)

{

newimgnumber = math.round(math.random() * 3);

}

imgclicked.src = myimages[newimgnumber];

return false;

}

</script>

</head>

<body>

<img name="img1" src="mexico.gif" border="0" onclick="return

changeimg(1)">

</body>

</html>

將該頁面保存為ch5_examp5.htm文件。要進行測試，我們還需要4個圖片文件，你可以自己創(chuàng)建4幅圖片，也可以從本書所提供的代碼下載中獲得這4幅圖片。

在瀏覽器中加載該頁面，代碼的效果將如圖5-3所示：

圖 5-3

當單擊某一幅圖片，將會看到它變成了另一幅隨機選取的圖片。

代碼解說

在上面的例子中，在頁面代碼的開始處定義了一個腳本塊，并在腳本塊的第一行定義了一個頁面級變量myimages。該變量是一個包含各圖片名稱字符串的數(shù)組。如下所示：

var myimages = new

array("usa.gif","canada.gif","jamaica.gif","mexico.gif");

接著定義了changeimg()函數(shù)，該函數(shù)將被用來連接到頁面圖片的<img>標記的onclick事件處理器。在這里，我們將兩個圖片的onclick事件處理器都連接到同一事件處理函數(shù)，實際上，我們可以將任意多個事件處理器連接到同一個函數(shù)。changeimg()函數(shù)可以接受一個參數(shù)，該參數(shù)表示觸發(fā)click事件的img對象在images數(shù)組中的索引值—— 通過該參數(shù)我們就知道需要對哪一個被單擊了的圖片進行處理。

在changeimg()函數(shù)的第一行，定義了一個變量imgclicked，該變量引用了被單擊的圖片所對應的img對象。傳入的imgnumber參數(shù)表示觸發(fā)click事件的img對象在images數(shù)組中的索引值，因此通過document.images[imgnumber]就能得到被單擊的圖片所對應的img對象。相應的代碼如下所示：

function changeimg(imgnumber)

{

var imgclicked = document.images[imgnumber];

接下來，把變量newimgnumber的值設置為一個0～3之間的隨機數(shù)。math.random()方法將返回一個0～1之間的隨機數(shù)，只需再乘以3，即math.random() * 3就能得到一個0～3之間的隨機數(shù)。然后，使用了math.round()方法對其進行四舍五入，就可以得到一個0～3之間的整數(shù)(即0、1、2或3)。用這個隨機的整數(shù)作為myimages數(shù)組的索引，就能從myimages數(shù)組中隨機地選擇一幅圖片。獲得該隨機數(shù)的代碼如下所示：

var newimgnumber = math.round(math.random() * 3);

接下來是一個while循環(huán)語句，該while循環(huán)的作用是確保隨機選出的圖片不是當前被單擊的那幅圖片。如果當前圖片對象的src屬性中包含了表示隨機圖片名稱的myimages[newimgnumber]字符串，則表示隨機選出的圖片與當前被單擊的圖片是同一幅圖片，這時需要重新計算一個隨機數(shù)，以選擇另一幅圖片。因此我們開始新一輪的循環(huán)，直到當前圖片對象的src屬性中不包含表示隨機圖片名稱的myimages[newimgnumber]字符串時，indexof()函數(shù)將返回–1，從而結束循環(huán)語句。相應的代碼如下所示：

while (imgclicked.src.indexof(myimages[newimgnumber]) != -1)

{

newimgnumber = math.round(math.random() * 3);

}

最后，我們將表示當前被單擊圖片的imgclicked對象的src屬性設置為隨機選出的圖片。并返回一個false值，以取消圖片的鏈接功能。這里，鏈接功能僅僅是為了提供一個onclick事件處理器。將imgclicked對象的src屬性設置為隨機圖片的代碼如下：

imgclicked.src = myimages[newimgnumber];

return false;

}

在下面的html標記中，把changeimg()函數(shù)連接到第一個<img>標記的事件處理器，并傳入一個參數(shù)0。

接著把changeimg()函數(shù)連接到第二個<img>標記的事件處理器，并傳入?yún)?shù)1：

<img name="img1" src="mexico.gif" border="0" onclick="return

changeimg(1)">