資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript 中的 EventHandler 及示例說明
JavaScript 事件，你熟悉它們嗎？我們在與網站互動時發生的任何操作都是 JavaScript 事件。這些操作包括按下鍵盤上的鍵、在選擇框中選擇選項、移動滑鼠游標等等。JavaScript 事件處理程式是一個在任何這些事件觸發時呼叫的函式。
在本文中，我們將討論事件處理程式、它們的實現及其元件，並提供各種程式碼示例。
事件
您可以建立響應特定條件的 JavaScript 程式碼，使用事件來實現。
一些常見的事件包括：
按下按鍵
網頁載入完成
點選網頁上的連結
什麼是事件處理程式？
JavaScript 提供了事件處理程式，以便在發生某些事件時執行我們的程式碼段。JavaScript 中的每個事件處理程式都以單詞“on”開頭，並處理特定型別的事件。
實現事件處理程式
要實現事件處理程式，我們通常在要操作的物件的 HTML 元素內包含事件處理程式名稱，後跟短語“SomeJSCode”，其中 SomeJSCode 表示我們在事件觸發時要執行的 JavaScript 程式碼。
示例
<html>
<body>
<input type="submit" name="IamHere" value="Hey there!" onclick="alert('Welcome!')"/>
</body>
</html>
如果我們希望我們的標記（HTML）符合 XHTML 規範，我們應該在 HTML 文字中使用小寫字母而不是像原始 JS 事件處理程式（“onClick”）那樣的大寫字母。在 XHTML 中，每個元素和屬性的名稱都必須小寫。
事件管理
Javascript 處理事件的多種方法 有三種管理事件的方法，或者可以說是三種不同型別的事件處理程式。
使用 addEventListener 處理
使用物件方法處理
使用 HTML 內聯屬性處理
使用 addEventListener
處理事件的理想方法是使用 addEventListener，因為 removeEventListener 允許您刪除相關的處理程式。
上面提到的偵聽器有兩種型別。
捕獲 - 在這裡，元素的父元素優先於發生事件的元素。
冒泡 - 在這種情況下，發生事件的實際元素優先於其父元素。
語法
document.addEventListener("click me", function(){
document.getElementById("example").innerHTML = "Hello Tutorials Point!!";
});
示例
讓我們來看一個 addEventListner 的示例。
<html>
<body>
<p>Click anywhere on the page to print "Hello tutorials point!".</p>
<p id="eg"></p>
<script>
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("eg").innerHTML = "Hello tutorials point!";
}
</script>
</body>
</html>
使用物件方法
DOM 中的每個元素都有一個可用於處理事件的方法，例如 onclick、ondrag 和 onkeypress。此方法允許您傳遞一個接受事件物件作為引數的函式。
語法
objectName.methodName()
示例
讓我們來看一個訪問物件方法的示例。
<html>
<body>
<h2>JS Objects</h2>
<p id="example"></p>
<script>
const person = {
fName: "Tutorials",
lName: "Point",
id: 1111,
fn: function() {
return this.fName + " " + this.lName;
}
};
document.getElementById("example").innerHTML = person.fn();
</script>
</body>
</html>
使用 HTML 內聯屬性
由於 HTML 語法，也可以使用 HTML 內聯屬性處理事件。
這些屬性接受函式呼叫作為值。
事件處理程式的回撥引數是一個事件物件，其中包含有關事件的資訊。
語法
<html_element event_handler="event_function()">Text</html_element>
示例
讓我們來看一個示例。
<html>
<body>
<h1>The Window Object</h1>
<h2>The alert() Method</h2>
<p>Click the button to display an alert box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("Hello! I am an alert box!");
}
</script>
</body>
</html>
事件元件
當事件發生時，會自動生成 Event 物件。要獲取有關事件的更多詳細資訊，您可以查詢與 Event 物件關聯的許多屬性：
Event.data - onDragDrop 事件使用此屬性。以陣列形式返回已刪除物件的 URL 列表。
Event.height - Event.height 包含儲存在 event.height 變數中的與事件相關的物件的框架高度。
Event.modifiers - 它返回一個字串，其中包含在按鍵或滑鼠移動期間按下的修飾鍵列表。Control_mask、Alt_mask、Meta_mask 和 Shift_mask 是修飾鍵的設定。
Event.pageX 和 Event.pageY - 當事件觸發時，這些屬性包含相對於頁面的指標的 (X,Y) 座標。
Event.screenX 和 Event.screenY - 這些屬性儲存事件發生時指標在螢幕上的 (X,Y) 畫素座標。
Event.target - Event.target 返回一個字串，標識啟動事件的物件。
Event.type - Event.type 提供事件型別（keypress、click 等）的字串表示。
Event.which - 此事件元件返回一個數字，表示滑鼠按鈕。左鍵單擊 = 1，右鍵單擊 = 2，中鍵單擊 = 3
Event.width - 此事件元件包含與發生的事件相關的框架寬度的儲存屬性。
Event.x 和 Event.y - 這些屬性儲存相對於與事件關聯的圖層的遊標的 (X,Y) 畫素座標。
一些常見的事件處理程式
讓我們仔細研究一些最常用的事件處理程式，並考慮它們的潛在應用。
onChange 事件
onChange 常用於在使用者更改欄位中的值時執行操作、驗證表單欄位或同時執行這兩項操作。當用戶更新欄位然後單擊螢幕上的其他位置或按下 TAB 鍵時，將啟用事件處理程式（即物件失去焦點）。
示例
<html>
<body>
<p>Select a state name from the list.</p>
<select id="selectMe" onchange="myFn()">
<option value="Bihar">Bihar</option>
<option value="UP">UP</option>
<option value="Delhi">Delhi</option>
<option value="Punjab">Punjab</option>
</select>
<p>On selecting a new state name, a function is triggered which have O/P value as selected state name.</p>
<p id="example"></p>
<script>
function myFn() {
var x = document.getElementById("selectMe").value;
document.getElementById("example").innerHTML = "Choosen state name: " + x;
}
</script>
</body>
</html>
onClick 事件
當用戶用滑鼠單擊目標物件時，將啟用 onClick 處理程式。這是建立基於 JavaScript 的動態網站的好方法，因為我們可以在各種專案上使用它，例如按鈕、複選框和連結。
示例
<!DOCTYPE html>
<html>
<body>
<h2>onclick Event</h2>
<button onclick="myFn()">Click me</button>
<p id="example"></p>
<script>
function myFn() {
document.getElementById("example").innerHTML = "You are at tutorials point";
}
</script>
</body>
</html>
onFocus 事件
當給定物件獲得焦點時，onFocus 將啟動。這通常發生在使用者使用滑鼠按鈕單擊物件或使用 TAB 鍵將游標移動到物件上時。onFocus 可用於大多數表單元件。
示例
<html>
<body>
<h2>The focus Event</h2>
Type something to observe onFocus event: <input type="text" onfocus="myFn(this)">
<script>
function myFn(m) {
m.style.background = "red";
}
</script>
</body>
</html>
onKeyPress 事件
當用戶按下按鍵（在鍵盤上）時，“onkeypress”事件觸發。
以下是與“onkeypress”事件相關的事件順序：
onkeydown
onkeypress
onkeyup
示例
<html>
<body>
<p>On KeyPress event</p>
<input type="text" onkeypress="myFn()">
<script>
function myFn() {
alert("A key is pressed");
}
</script>
</body>
</html>
onLoad
頁面完全載入後，將呼叫 onLoad 處理程式。令人討厭的彈出式廣告視窗以及在整個頁面載入完成後啟動其他操作（如動畫或計時器）是 onLoad 函式的常見應用。
示例
<html>
<body onload="myFn()">
<h1>You are at the tutorials point!!</h1>
<script>
function myFn() {
alert("Webpage Loaded!");
}
</script>
</body>
</html>
mouseover 和 mouseout 事件
當滑鼠游標移出元素時，“onmouseout”事件觸發。
Onmouseout 常與“onmouseover”事件結合使用，“onmouseover”事件在指標移動到元素上時發生。
示例
<html>
<body>
<h1 id="example" onmouseover="mouseOverme()" onmouseout="mouseOutOfMe()">Mouse over and out</h1>
<script>
function mouseOverme() {
document.getElementById("example").style.color = "red";
}
function mouseOutOfMe() {
document.getElementById("example").style.color = "blue";
}
</script>
</body>
</html>
onSubmit 事件
在將表單提交到伺服器之前，通常使用“onSubmit”事件處理程式進行驗證，該處理程式僅與 Form 物件相容。我們有一篇關於使用 JavaScript 進行表單驗證的完整教程。
示例
<html>
<head>
<title>Welcome To My Domain</title>
</head>
<body>
<form onsubmit="alert('Form Submitted!!')">
UserName:<input type="text" name="user"><br/>
College:<input type="text" name="colg"><br/>
City:<input type="text" name="city"><br/>
Mobile:<input type="text" name="mob"><br/>
<input type="submit" value="SUBMIT">
</form>
</body>
</html>
結論
在本文中，我們學習了事件處理、它們的實現、事件管理及其元件，並提供了幾個事件處理程式的各種程式碼示例。
2K+ 次瀏覽
