跳至內容

JavaScript/Event handling

維基教科書，自由的教學讀本

事件處理器

[編輯]

可以處理的事件是瀏覽器窗口中發生的事情，包括文檔加載、用戶單擊滑鼠按鈕、用戶按下某個鍵以及瀏覽器屏幕改變大小。當分配一個函數來處理一個事件類型時，該函數會在該事件類型的事件發生時運行。

可以通過以下方式分配事件處理程序：

  • 直接通過 HTML 中的元素屬性：<body onload="alert('Hello World!');">
  • 通過 JavaScript，通過將事件類型分配給元素屬性：document.onclick = clickHandler;
  • 通過 JavaScript 直接調用一個元素的addEventListener()方法。

從腳本賦值一個處理程序使用的語法： '[element].[event] = [function];'，其中[element]是頁面元素，[event] 是所選事件的名稱，[function] 是事件發生時調用的函數的名稱。

例如： 

document.onclick = clickHandler;

每當用戶在屏幕上的任意位置單擊滑鼠時，此處理程序將導致函數clickHandler()被執行。請注意，當一個事件處理程序被賦值時，函數名稱不以括號結尾。我們只是將事件指向函數的名稱。clickHandler()函數定義如下： 

function clickHandler(event) {
  //some code here
}

在某些瀏覽器中，事件必須顯式傳遞給函數，因此作為預防措施，通常最好包含一個條件來測試event變量是否已傳遞。如果沒有，則使用那些適用於其它瀏覽器的替代方法： 

function clickHandler(event) {
  event = event || window.event;
  //some code here
}

也可以為文檔中的元素賦值事件處理程序。例如： 

document.getElementsByTagName('a')[0].onclick = linkHandler;

這將導致當用戶單擊頁面上的第一個連結時執行linkHandler()函數。

請記住，這種風格的處理程序賦值依賴於連結在頁面內的位置。如果在此之前添加了另一個連結標籤，它將接管原始連結的處理程序。最佳實踐是通過使用id屬性為每個連結分配一個標識符來保持代碼和頁面結構的分離。 

<a id="faqLink" href="faq.html">Faq</a>

然後，無論元素位於何處，處理程序賦值都可以工作。 

document.getElementById('faqLink').onclick = linkHandler;

事件是可以被 JavaScript 檢測到的動作，事件對象提供有關已發生事件的信息。有時我們希望在事件發生時執行 JavaScript，例如當用戶單擊按鈕時。事件通常與函數結合使用，在事件發生之前函數不會被執行！JavaScript 事件處理程序分為兩種類型：

  • 交互式事件處理程序——依賴於用戶與 HTML 頁面的交互；例如，點擊一個按鈕
  • 非交互式事件處理程序 - 不需要用戶交互；例如，on load

事件特性

[編輯]

下面是可以插入到不同HTML元素中以定義事件操作的事件特性。

特性 該事件發生在... IE Firefox Opera W3C 標準
onblur 元素失去焦點 3 1 9 是
onchange 欄位內容發生變化 3 1 9 是
onclick 滑鼠點擊對象 3 1 9 是
ondblclick 滑鼠雙擊一個對象 4 1 9 是
onerror 加載文檔或圖像時
發生錯誤		 4 1 9 是
onfocus 元素獲得焦點 3 1 9 是
onkeydown 按下鍵盤鍵 3 1 No 是
onkeypress 按下或按住
鍵盤鍵		 3 1 9 是
onkeyup 鍵盤鍵被釋放 3 1 9 是
onload 頁面或圖像
已完成加載		 3 1 9 是
onmousedown 按下滑鼠按鈕 4 1 9 是
onmousemove 滑鼠移動 3 1 9 是
onmouseout 滑鼠從元素上移開 4 1 9 是
onmouseover 滑鼠移到一個元素上 3 1 9 是
onmouseup 釋放滑鼠按鈕 4 1 9 是
onresize 調整窗口或框架的大小 4 1 9 是
onselect 文本被選中 3 1 9 是
onunload 文本被選中 3 1 9 是

滑鼠/鍵盤屬性：

屬性 描述 IE Firefox Opera W3C 標準
altKey 返回觸發事件時是否按下「ALT」鍵 6 1 9 Yes
button 返回觸發事件時單擊的滑鼠按鈕 6 1 9 Yes
clientX 返回觸發事件時滑鼠指針的水平坐標 6 1 9 Yes
clientY 返回觸發事件時滑鼠指針的垂直坐標 6 1 9 Yes
ctrlKey 返回觸發事件時是否按下「CTRL」鍵 6 1 9 Yes
metaKey 返回觸發事件時是否按下「meta」鍵 6 1 9 Yes
relatedTarget 返回與觸發事件的元素相關的元素 No 1 9 Yes
screenX 返回觸發事件時滑鼠指針的水平坐標 6 1 9 Yes
screenY 返回觸發事件時滑鼠指針的垂直坐標 6 1 9 Yes
shiftKey 返回觸發事件時是否按下「SHIFT」鍵 6 1 9 Yes

其他事件特性：

特性 描述 IE Firefox Opera W3C 標準
bubbles 返回一個布爾值，指示事件是否為冒泡事件 No 1 9 Yes
cancellable 返回一個布爾值，指示事件是否可以阻止其默認操作 No 1 9 Yes
currentTarget 返回其事件偵聽器(listener)觸發事件​​的元素 No 1 9 Yes
返回觸發事件的元素 No 1 9 Yes
timeStamp 從紀元（系統啟動或事件觸發）返回時間戳，以毫秒為單位 No 1 9 Yes

標準事件處理程序

[編輯]
Attribute Trigger
onabort 圖像加載中斷
onblur 元素失去焦點
onchange 元素被修改
onclick 元素被點擊
ondblclick 元素被雙擊
onerror 加載元素時出錯
onfocus 元素獲得焦點
onkeydown 當元素具有焦點時按下了一個鍵
onkeypress 元素接收到擊鍵
onkeyup 當元素具有焦點時釋放一個鍵
onload 加載了一個元素
onmousedown 在元素上按下滑鼠按鈕
onmousemove 滑鼠指針在元素內移動
onmouseout 滑鼠指針移到元素外
onmouseover 滑鼠指針移動到元素上
onmouseup 滑鼠按鈕在元素上被釋放
onreset 單擊了表單的重置按鈕
onresize 包含的窗口或框架已調整大小
onselect 元素內的文本被選中
onsubmit 正在提交表單
onunload 正在卸載內容（例如正在關閉窗口）
onscroll 用戶滾動（在任何方向和以任何方式）

作為 HTML 特性的事件處理程序

[編輯]

在 HTML 中，JavaScript 事件可以包含在任何指定的屬性中——例如，body 標籤可以有一個onload事件： 

<body onload="alert('Hello World!');">

HTML 事件屬性的內容是在事件觸發時解釋執行的 JavaScript 代碼，其工作方式與 JavaScript 塊非常相似。當您希望將 JavaScript 直接附加到相關標籤時，可以使用這種形式的代碼。

這種類型的技術稱為內聯 JavaScript，與之前介紹的其他不顯眼的 JavaScript 技術相比，它可以被視為一種不太理想的技術。可以認為使用內聯 JavaScript 在本質上類似於使用內聯 CSS，其中 HTML 是通過將 CSS 放入樣式屬性中來設置樣式的。這是一種最好應避免的做法，有利於更通用的技術。

addEventListener

[編輯]

此方法將事件處理程序添加到事件類型的元素，而不刪除現有處理程序。

連結：

removeEventListener

[編輯]

此方法從給定事件類型的元素中刪除特定事件處理程序。

連結：

keyCode

[編輯]

鍵盤事件的 keyCode 屬性包含一個數字，指示按下了哪個鍵。

對於 keydown 事件，鍵代碼包括 A 的 65 到 Z 的 90，以及 0 到 9 的 48 到 57。

例子： 

document.addEventListener("keydown", function(evt) {
  alert("Key pressed; key code: " + evt.keyCode);
  evt.preventDefault();
});

連結：

進一步閱讀

[編輯]
取自「https://zh.wikibooks.org/w/index.php?title=JavaScript/Event_handling&oldid=169713」