Javascript 事件監聽器

exp | find | iat | JavaScript | mean | sin

Michael Zippo

向網站添加交互功能是 JavaScript 的亮點。雖然 HTML 和 CSS 分別用於定義網頁的結構和样式，但您可以使用 JavaScript 使您的網站更具動態性。

在 JavaScript 中，事件用於創建交互式網站.在本指南中，我們將討論 JavaScript 事件。我們將探索可以在哪裡使用事件、如何定義事件以及如何調用事件。開始吧！

什麼是 JavaScript 事件？

事件可以由瀏覽器或用戶觸發，並且可以改變網頁的狀態。當您單擊網頁上的按鈕時，會創建一個 JavaScript 事件。當您單擊展開的下拉菜單時，將使用 JavaScript 事件。

JavaScript 事件有廣泛的用途，包括：

要在 JavaScript 中處理事件，您需要了解兩個概念：事件處理程序和事件偵聽器。

事件處理程序是在網頁上觸發事件時執行的函數。事件偵聽器將事件函數附加到 HTML 元素，因此當執行該函數時，Web 元素會發生變化。

可以通過三種方式定義事件處理程序：使用內聯事件處理程序、使用事件或事件偵聽器。

在 JavaScript 中開始使用事件的最簡單方法是使用在線事件處理程序。這意味著您將在 HTML 文件中定義 事件。

對於這個例子，假設我們是為一家名為 JJ Smith`s Bakery 的麵包店設計網站。我們希望在提交表單時提示用戶輸入文本“收到的響應”。

考慮以下代碼：

這段代碼顯示了一個如下所示的網頁：

我們的按鈕的工作原理相同和以前一樣，但是我們的代碼以不同的方式編寫。我們沒有內聯編寫事件處理程序，而是將它們移動到我們的 main.js 文件中。這有助於我們編寫更易於管理的代碼，因為我們不必閱讀所有 HTML 代碼即可知道我們的內聯事件在何處觸發。

事件可用於在 JavaScript 中聲明一個事件。始終檢查 i 元素的狀態何時發生更改，如果該元素發生更改，則將執行偵聽器中的代碼。

例如，當您單擊連接到的按鈕時一個事件監聽器，監聽器“聽到”鼠標事件已被觸發。然後它將運行您與該特定事件偵聽器關聯的代碼。

此示例的 HTML 代碼與上面相同，但我們將對我們的““”進行一些小改動。手。 js" 文件：

在這段代碼中，我們讓我們使用 addEventListener 創建一個事件監聽器。這不是像我們在兩個最新示例中所做的那樣將我們的 JavaScript 函數 submitForm () 綁定到一個 onclick 事件。

我們指定“click”來告訴我們的代碼在我們的按鈕被鼠標點擊時進行監聽。除了點擊事件之外還有其他類型的事件，比如鍵盤事件，但是在本教程中我們將重點關注在鼠標點擊事件上。

輸出和我們看到的一樣在我們的最後兩個示例中，但這次我們使用的是 HTML 事件偵聽器。事件偵聽器是 JavaScript 中聲明事件的最新方式，並且可能是最常用的方法。

結論

JavaScript 事件允許您使您的網頁具有交互性。當您按下按鈕、提交表單或將鼠標懸停在文本上時可以觸發事件。在 JavaScript 中聲明事件有三種方式：內聯、使用屬性，或使用偵聽器。

您現在可以像專業網絡開發人員一樣開始創建 JavaScript 事件了！