javaScript事件

在本文中，您將學習如何在 javaScript 中處理事件。

了解事件和事件處理程序

事件是當用戶與網頁交互時發生的事情，例如當他單擊鏈接或按鈕、在輸入框或文本區域中輸入文本、在選擇框中進行選擇、按下鍵盤上的鍵、移動鼠標指針時，提交表單等。在某些情況下，瀏覽器本身可以觸發事件，例如頁面加載和卸載事件。

當事件發生時，您可以使用 JavaScript 事件處理程序（或事件偵聽器）來檢測它們并執行特定任務或一組任務。按照慣例，事件處理程序的名稱總是以單詞“on”開頭，因此調用 click 事件onclick的事件處理程序，類似地調用load 事件的onload事件處理程序，調用 blur 事件的事件處理程序onblur，等等在。

有多種方法可以分配事件處理程序。最簡單的方法是使用特殊的事件處理程序屬性將它們直接添加到 HTML 元素的開始標記中。例如，要為按鈕元素分配點擊處理程序，我們可以使用onclick屬性，如下所示：

Click Me

但是，為了使 JavaScript 與 HTML 分離，您可以在外部 JavaScript 文件或標簽中設置事件處理程序，如下所示：

Click Me

注意：由于 HTML 屬性不區分大小寫，所以onclick也可以寫成onClick,OnClick或ONCLICK。但它的值是區分大小寫的。

一般來說，事件可以分為四大類——鼠標事件、鍵盤事件、表單事件和文檔/窗口事件。還有許多其他事件，我將在后面的章節中介紹它們。下面的部分將一一簡要概述最有用的事件以及現實生活中的練習示例。

鼠標事件

當用戶單擊某個元素、將鼠標指針移到某個元素上等時，會觸發鼠標事件。以下是一些最重要的鼠標事件及其事件處理程序。

點擊事件（onclick）

當用戶單擊網頁上的元素時，會發生單擊事件。通常，這些是表單元素和鏈接。您可以使用onclick事件處理程序處理單擊事件。

以下示例將在您單擊元素時向您顯示一條警報消息。

Click Me Click Me

上下文菜單事件 (oncontextmenu)

當用戶在元素上單擊鼠標右鍵以打開上下文菜單時，會發生上下文菜單事件。您可以使用oncontextmenu事件處理程序處理上下文菜單事件。

以下示例將在您右鍵單擊元素時顯示警告消息。

Right Click on Me Right Click on Me

鼠標懸停事件 (onmouseover)

當用戶將鼠標指針移到元素上時，會發生 mouseover 事件。

您可以使用onmouseover事件處理程序處理鼠標懸停事件。以下示例將在您將鼠標懸停在元素上時向您顯示一條警報消息。

Place Mouse Over Me Place Mouse Over Me

Mouseout 事件 (onmouseout)

當用戶將鼠標指針移到元素外時，會發生 mouseout 事件。

您可以使用onmouseout事件處理程序處理mouseout 事件。以下示例將在發生 mouseout 事件時向您顯示警報消息。

Place Mouse Inside Me and Move Out Place Mouse Inside Me and Move Out

鍵盤事件

當用戶按下或釋放鍵盤上的鍵時會觸發鍵盤事件。下面是一些最重要的鍵盤事件及其事件處理程序。

Keydown 事件 (onkeydown)

keydown 事件發生在用戶按下鍵盤上的某個鍵時。

您可以使用onkeydown事件處理程序處理keydown 事件。以下示例將在發生 keydown 事件時向您顯示一條警報消息。

Note: Try to enter some text inside input box and textarea.

Keyup 事件 (onkeyup)

keyup 事件在用戶釋放鍵盤上的鍵時發生。

您可以使用onkeyup事件處理程序處理keyup 事件。以下示例將在發生 keyup 事件時向您顯示一條警報消息。

Note: Try to enter some text inside input box and textarea.

按鍵事件 (onkeypress)

當用戶按下鍵盤上具有與其關聯的字符值的鍵時，會發生 keypress 事件。例如，Ctrl、Shift、Alt、Esc、Arrow 鍵等鍵不會產生 keypress 事件，但會產生 keydown 和 keyup 事件。

您可以使用onkeypress事件處理程序處理按鍵事件。以下示例將在發生按鍵事件時向您顯示一條警報消息。

Note: Try to enter some text inside input box and textarea.

表單事件

當表單控件接收或失去焦點時，或者當用戶修改表單控件值時觸發表單事件，例如通過在文本輸入中鍵入文本、在選擇框中選擇任何選項等。以下是一些最重要的表單事件和他們的事件處理程序。

焦點事件（onfocus）

當用戶將焦點放在網頁上的元素上時，就會發生 focus 事件。

您可以使用onfocus事件處理程序處理焦點事件。以下示例將在接收焦點時以黃色突出顯示文本輸入的背景。

Button

注意：this事件處理程序中關鍵字的值是指具有處理程序的元素（即當前正在傳遞事件的位置）。

模糊事件（onblur）

當用戶將焦點從表單元素或窗口移開時，會發生模糊事件。

您可以使用onblur事件處理程序處理模糊事件。以下示例將在文本輸入元素失去焦點時向您顯示警報消息。

Submit

Note: First click inside the text input box then click outside to see how it works.

要將焦點從表單元素上移開，首先單擊它的內部，然后按鍵盤上的 Tab 鍵，將焦點放在其他東西上，或者單擊它的外部。

Change 事件 (onchange)

當用戶更改表單元素的值時，就會發生 change 事件。

您可以使用onchange事件處理程序處理更改事件。以下示例將在您更改選擇框中的選項時向您顯示一條警報消息。

Select Male Female

Note: Select any option in select box to see how it works.

提交事件（onsubmit）

submit 事件僅在用戶在網頁上提交表單時發生。

您可以使用onsubmit事件處理程序處理提交事件。以下示例將在向服務器提交表單時向您顯示一條警報消息。

文檔/窗口事件

在頁面加載或用戶調整瀏覽器窗口大小等情況下也會觸發事件。以下是一些最重要的文檔/窗口事件及其事件處理程序。

加載事件（onload）

當網頁在 Web 瀏覽器中完成加載時發生 load 事件。

您可以使用onload事件處理程序處理加載事件。以下示例將在頁面加載完成后立即向您顯示警報消息。

This is a heading

This is paragraph of text.

卸載事件 (onunload)

unload 事件發生在用戶離開當前網頁時。

您可以使用onunload事件處理程序處理卸載事件。以下示例將在您嘗試離開頁面時向您顯示一條警告消息。

This is a heading

This is paragraph of text.

Note: This example may not work. The unload event is not supported properly in most of the browsers.

調整大小事件 (onresize)

當用戶調整瀏覽器窗口大小時，會發生 resize 事件。在瀏覽器窗口最小化或最大化的情況下也會發生調整大小事件。

您可以使用onresize事件處理程序處理調整大小事件。以下示例將在您將瀏覽器窗口大小調整為新的寬度和高度時向您顯示一條警告消息。

JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。