JavaScript 事件

2025年4月23日 | 阅读 3 分钟

对象状态的变化称为事件。在 HTML 中，有各种事件代表用户或浏览器执行了某些活动。当 JavaScript 代码包含在 HTML 中时，js 会对这些事件做出响应并允许执行。这个响应事件的过程称为事件处理。因此，js 通过事件处理程序来处理 HTML 事件。

例如，当用户在浏览器上单击时，添加 js 代码，该代码将执行在事件上要执行的任务。

事件处理程序的使用

它可以通过在 HTML 元素中添加特殊属性来直接使用。它们也可以在 <script> 标签内或外部 JavaScript 文件中使用。

一些 HTML 事件及其事件处理程序是

鼠标事件

事件发生	事件处理程序	描述
点击	onclick	当鼠标单击元素时
鼠标悬停	onmouseover	当鼠标光标移到元素上时
鼠标移出	onmouseout	当鼠标光标离开元素时
mousedown	onmousedown	当在元素上按下鼠标按钮时
mouseup	onmouseup	当在元素上释放鼠标按钮时
mousemove	onmousemove	当鼠标移动发生时。

键盘事件

事件发生	事件处理程序	描述
Keydown & Keyup	onkeydown & onkeyup	当用户按下然后释放按键时

表单事件

事件发生	事件处理程序	描述
focus	onfocus	当用户聚焦于某个元素时
submit	onsubmit	当用户提交表单时
blur	onblur	当焦点离开表单元素时
change	onchange	当用户修改或更改表单元素的值时

窗口/文档事件

事件发生	事件处理程序	描述
load	onload	当浏览器完成页面加载时
unload	onunload	当访问者离开当前网页时，浏览器会卸载它
resize	onresize	当访问者调整浏览器窗口大小时
reset	onreset	当窗口大小被调整时
scroll	onscroll	当访问者滚动一个可滚动区域时

让我们讨论一些关于事件及其处理程序的例子。

Click 事件

<html>
<head> Javascript Events </head>
<body>
<script language="Javascript" type="text/Javascript">
	<!--
	function clickevent()
	{
		document.write("This is Tpoint Tech");
	}
	//-->
</script>
<form>
<input type="button" onclick="clickevent()" value="Who's this?"/>
</form>
</body>
</html>

说明

在上面给出的示例中，我们创建了一个名为“clickevent”的函数，它通过“onclick”事件调用。当用户单击此按钮时，将调用此函数，函数将返回字符串“This is Tpoint Tech”，并且“document.write”函数将帮助将返回的字符串写入文档。

MouseOver 事件

<html>
<head> 
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
	<!--
	function mouseoverevent()
	{
		alert("This is Tpoint Tech");
	}
	//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>

说明

在上面给出的示例中，我们创建了一个名为“mouseoverevent”的函数，它通过“onmouseover”事件调用。当用户将鼠标悬停在 <p> 文本上时，将调用此函数并显示一个警报框。我们可以在程序中根据需要多次重用 mouseoverevent 函数，这样可以节省内存。

Focus 事件

<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onfocus="focusevent()"/>
<script>
<!--
	function focusevent()
	{
		document.getElementById("input1").style.background=" aqua";
	}
//-->
</script>
</body>
</html>

说明

在上面给出的示例中，我们创建了一个名为“focusevent”的函数，它通过“onfocus”事件调用。当用户将焦点放在文本字段上时，将调用此函数，并且文本字段的背景颜色将发生变化。

Keydown 事件

<html>
<head> Javascript Events</head>
<body>
<h2> Enter something here</h2>
<input type="text" id="input1" onkeydown="keydownevent()"/>
<script>
<!--
	function keydownevent()
	{
		document.getElementById("input1");
		alert("Pressed a key");
	}
//-->
</script>
</body>
</html>

说明

在上面给出的示例中，我们创建了一个名为“keydownevent”的函数，它通过“onkeydown”事件调用。当用户将焦点放在文本字段上时，将调用此函数并显示一个警报框。

Load 事件

<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
<!--
document.write("The page is loaded successfully");
//-->
</script>
</body>
</html>

说明

在上面的示例中，我们在 html 的 <body> 标签上创建了一个“onload”事件。当 HTML body 被加载时，一个函数将返回字符串“The page is loaded successfully”，并且“document.write”函数将帮助将返回的字符串写入文档。

下一个主题JavaScript addEventListener()

JavaScript 事件

鼠标事件

键盘事件

表单事件

窗口/文档事件

Click 事件

MouseOver 事件

Focus 事件

Keydown 事件

Load 事件

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合