基本事件模型

2024-12-23

文章推薦指數： 80 %

投票人數：10人

在事件標準化之前，就存在於各瀏覽器的一個事件模型，稱為基本事件模型（Basic Event Model），雖然沒有標準化，但因相對（於DOM Level 2事件與Internet Explorer事件模型 ... 回JavaScript 網頁應用程式本身就是事件驅動，透過使用者的操作或系統的事件，在適當的時候作些事情。

在事件標準化之前，就存在於各瀏覽器的一個事件模型，稱為基本事件模型（BasicEventModel），雖然沒有標準化，但因相對（於DOMLevel2事件與InternetExplorer事件模型）來說，有比較跨瀏覽器的一致性，因此是大多數人最熟悉且最常用的事件模型。

在基本事件模型中，要在某個事件發生時，呼叫指定的函式，是將函式指定給某個特性。

例如，要在網頁文件準備好，所有資源都載入後作些事情，可以註冊window的load事件，方式就是將函式指定給window.onload特性，這是至今的範例都看到的： window.onload=function(){ //onload事件發生時要作的事... }; 例如，要在按鈕的click事件發生時作些事，可以指定函式給按鈕元素的onclick特性。

BasicEventModel-1.html

BasicEventModel-1 window.onload=function(){functionhandler(){document.getElementById('console').innerHTML='Who\'sclicked:'+this.id;}document.getElementById('btn1').onclick=handler;document.getElementById('btn2').onclick=handler;};按鈕一
按鈕二
在上例中，用handler()函式註冊了兩個按鈕的click事件，事件在元素上觸發而呼叫函式時，this就會設定為當時觸發事件的元素。

在這個例子中，當你按下按鈕時而呼叫函式時，this就參考至當時按下的按鈕。

像以上的作法，稱之為傳統模型（Traditionalmodel）或傳統註冊模型（Traditionalregistrationmodel）。

儘管現在已不建議接下來的作法，但在過去開發的網頁程式中經常看到的作法就是，在標籤的屬性上撰寫JavaScript作為觸發事件時要執行的程式，這樣的作法稱之為行內模型（Inlinemodel）或行內註冊模型（Inlineregistrationmodel）。

例如： BasicEventModel-2.html BasicEventModel-2 functionhandle(element){document.getElementById('console').innerHTML='Who\'sclicked:'+element.id;}按鈕一
按鈕二
在標籤屬性上撰寫程式碼，儘管只有一小段，但仍算是在畫面中侵入程式碼，現在已不鼓勵這樣的作法。

在上例中，並非直接指定click事件的處理器函式，事實上，在標籤上指定程式碼的作法，會自動建立匿名函式，也就是說，上例相當於： document.getElementById('btn1').onclick=function(){ handle(this); }; 你指定的程式碼，會成為匿名函式的本體內容，這也說明了上例中，this其實就是指觸發事件時的元素。

有些事件觸發時會有預設的動作，例如表單的submit事件預設會發送表單，超鏈結的click事件預設會連結至指定網頁。

在基本事件模型中，若要取消預設事件動作，可以讓事件處理器傳回false。

例如： BasicEventModel-3.html BasicEventModel-3 window.onload=function(){document.form1.onsubmit=function(){if(this.data.value.length===0){returnfalse;}};};輸入資料：
送出在上例中，按下按鈕會觸發表單的submit事件，你檢查欄位是否有填值，沒有的話就在事件處理器中傳回false，這會取消表單的發送，而這就是表單驗證的基本作法。

若是使用行內模型。

就會看到這種作法： BasicEventModel-4.html BasicEventModel-4 functionvalidate(form){if(form.data.value.length===0){returnfalse;}returntrue;}輸入資料：
送出要在使用者離開頁面時，作一個簡單的確認，若使用行內模型，可以如下：首頁事件不一定要由使用者的操作觸發，你也可以直接呼叫方法來觸發事件。

例如可以呼叫表單元素的submit()方法，如果在載入頁面時，想要讓第一個輸入欄位取得焦點，可以呼叫輸入欄位元素的focus()方法等。

例如，如果某個輸入欄位id為user，則可以如下在載入後讓該欄位取得焦點： window.onload=function(){ document.getElementById('test').focus(); };