数据结构
网络
关系型数据库管理系统
操作系统
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+ 次浏览
广告