資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中為指定元素新增事件處理程式？\n
事件在 HTML 中是使用 HTML 元素髮生的“事情”。當在 HTML 頁面中使用 JavaScript 時，它可以“響應”這些事件。
事件是使用者與使用者介面元素互動的結果。觸發事件的操作包括例如按下按鈕、移動滑鼠、在鍵盤上輸入字元、從列表中選擇專案以及滾動頁面。
下面列出了 HTML 事件的示例 -
- HTML 網頁已完成載入
- HTML 輸入欄位已更改
- HTML 按鈕被點選
新增事件處理程式
這些事件是使用者或瀏覽器執行的操作。可以使用 JavaScript 程式碼將事件處理程式屬性新增到 HTML 元素中。以下是此語法 -
<element event = ‘ JavaScript – code ’> <element event = “ JavaScript – code ”>
示例 1
基本按鈕
在下面的示例中，我們在按鈕上實現了onclick事件，並將日期物件傳遞到 innerHTML 中。因此，如果我們點選按鈕，它將在段落中顯示日期和時間，因為我們將段落標籤的 id 傳遞到 onclick 事件中。
<!DOCTYPE html> <html> <body> <button onclick="document.getElementById('dummy').innerHTML=Date()">The Time right now is: </button> <p id="dummy"></p> </body> </html>
示例 2
使用 HTML DOM 屬性
在這個例子中，我們使用 HTML DOM 屬性來新增事件。當用戶點選按鈕時，onclick 事件屬性開始工作。當元素被滑鼠點選時，指令碼開始執行。
<!doctype html> <html> <head> <script> function Tutorialspoint() { alert('Welcome Tutorialspoint!'); } </script> </head> <body> <button type="button" onclick="Tutorialspoint()"> Click! </button> </body> </html>
示例 3
在輸入欄位上新增兩個事件
在這個例子中，使用 addEventListener，我們在文字欄位（）中添加了兩個按鍵事件。第一個按鍵事件將在您嘗試使用鍵盤在文字欄位中輸入文字時發生。然後第二個按鍵事件將在第一個按鍵事件之後發生。
<!DOCTYPE html> <html> <body> <input id="input"> <script> var a = document.getElementById("input"); a.addEventListener("keypress", firstFunction); a.addEventListener("keypress", secondFunction); function firstFunction() { alert ("Keypress happened inside the text-box!"); } function secondFunction() { alert ("Welcome to TutorialsPoint!"); } </script> </body> </html>
第一個按鍵事件發生在您按下鍵盤鍵以在輸入欄位中鍵入內容時。
第二個按鍵事件將在點選警示框中的“確定”按鈕後發生。
示例 4
更改 HTML 元素的 CSS
在這個例子中，一個“keypress”事件使用 addEventListener() 方法附加到一個 input 元素。在函式中，我們使其透過使用style.backgroundColor更改顏色。如果使用者在輸入欄位中輸入任何鍵，它將更改其顏色。
<!DOCTYPE html> <html> <body> <p>Do try to type something in the text-box below and it will change it's color</p> <input type="text" id="example"> <script> document.getElementById("example").addEventListener("keypress", func); function func() { document.getElementById("example").style.backgroundColor = "green"; } </script> </body> </html>
在欄位中鍵入一些鍵後，會導致顏色更改。
示例 5
向文字框新增事件偵聽器
在下面的示例中，我們將討論如何向文字框新增事件處理程式。在這種情況下，我們將使用一個文字欄位並向其新增一個事件偵聽器，以便在滑鼠懸停在其上時顯示內容。
<!DOCTYPE html> <html lang="en"> <head> <title>Add an event handler</title> <div id="clk">Hello, Alice</div> <input type="text" value="mouseover here" id="txt" /> </head> <body> <script> document.getElementById("txt").addEventListener("mouseover", function () { document.getElementById("clk").innerHTML = "Tutorix is the best e-learning platform."; }); </script> </body> </html>
示例 6
以下是另一個向按鈕新增事件的示例 -
<!DOCTYPE html> <html lang="en"> <head> <title>Add an event handler</title> <div id="clk">Hello, Alice</div> <input type="button" value="mouseout here" id="btn" /> </head> <body> <script> document.getElementById("btn").addEventListener("mouseout", function () { document.getElementById("clk").innerHTML = "Tutorix is the best e-learning platform."; }); </script> </body> </html>
285 次檢視
