資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML 中處理 JavaScript 事件？
事件基本上被定義為軟體識別的動作或動作發生。事件可以由以下任何一項觸發：使用者、系統或遠端回撥。一些常見的事件包括按下**按鈕**、懸停、點選超連結等。
在這篇文章中，我們將探索一些常用的**JavaScript**事件，並學習如何處理這些事件並執行所需的任務。為了在**HTML**中處理事件，我們需要在 HTML**標籤**中新增將在 JavaScript 中執行的函式，當 HTML 標籤中的任何事件被觸發時，該函式將被執行。HTML 中有多種型別的事件，例如鍵盤事件、滑鼠事件、表單事件等等。
語法
在 HTML 中處理點選事件
<element onclick="myScript">
在 HTML 中處理表單事件
onBlur
<element onblur="myScript">
onChange
<element onchange="myScript">
onFocus
<element onfocus="myScript">
示例 1
在下面的示例中，我們使用**select**標籤建立了一個下拉列表。在從下拉列表中選擇時，將呼叫**onchange**事件。使用此事件，我們呼叫在 JavaScript 中存在的**OnChangeFunction()**，並將根據需要執行進一步的操作。因此，在 HTML 中定義的事件處理程式可以呼叫在指令碼中定義的函式。
# 檔名：event.html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<input type="text" name="blur" id="blur"
onblur="BlurFunction()"
placeholder="Enter Name" />
<br/><br/>
<select id="course" onchange="OnChangeFunction()">
<option value="Subjects">
Subjects
</option>
<option value="Maths">
Maths
</option>
<option value="Chemistry">
Chemistry
</option>
<option value="Physics">
Physics
</option>
</select>
<p id="demo"></p>
<br /><br />
</center>
<script>
function BlurFunction() {
let x = document.getElementById("blur");
x.value = x.value.toUpperCase();
}
function OnChangeFunction() {
let x = document.getElementById("course").value;
let y = document.getElementById("blur").value;
document.getElementById("demo")
.innerHTML = "Hi "+ y +"!! You chose: " + x;
}
</script>
</body>
</html>輸出
示例 2
在下面的示例中，我們正在檢視**onclickonclick()**和**onmouseoveronmouseover()**事件。
# 檔名：event.html
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color: blue;">
Welcome to Tutorials Point
</h1>
<button onclick="OnClickFunction()">
Click me
</button>
<p id="demo"></p>
<br /><br />
<p onmouseover="MouseHover()">
Hover Mouse Here
</p>
</center>
<script>
function OnClickFunction() {
document.getElementById("demo")
.innerHTML = "Button was Clicked !";
}
function MouseHover() {
alert("Mouse Hovered over me");
}
</script>
</body>
</html>輸出
更新於： 2022年4月26日
1K+ 次瀏覽
廣告