DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 事件處理器作為浏覽器對象的屬性
事件處理器作為浏覽器對象的屬性
編輯:關於JavaScript     

我們已經介紹了對象的概念,我們可以通過定義屬性和方法來定義對象。不僅如此,對象還具有與之相關的事件。由於JavaScript中的內建對象並沒有相關的事件,因此在前面的內容中我們並沒有提到事件這個概念。但是,BOM對象則具有相關的事件。

那麼,BOM對象都具有哪些事件呢?

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

那麼,事件對我們有什麼用呢?

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

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

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

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

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

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

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

對於第二種方法,首先需要定義當事件發生時所要執行的函數。然後,再把相應對象的事件處理器屬性設置為我們所定義的函數。

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

<html>

<body>

<script language="JavaScript" type="text/javascript">

function linkSomePage_onclick()

{

alert('This link is going nowhere');

return false;

}

</script>

<A href="somepage.htm" name="linkSomePage">

Click Me

</A>

<script language="JavaScript" type="text/javaScript">

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

</script>

</body>

</html>

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

與上一個例子類似,我們定義了一個linkSomePage_onclick()函數。並用該函數的返回值指出我們是否希望執行事件的默認行為。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved