JavaScript - Events (事件简介)

上一页
下一页

什么是事件 ？

JavaScript 与 HTML 的交互是通过用户或浏览器操作页面时发生的事件来处理的。

当页面加载时，它被称为Events (事件)。当用户单击按钮时，该单击也是一个事件。其他示例包括按任意键、关闭窗口、调整窗口大小等事件。

开发人员可以使用这些事件来执行 JavaScript 编码的响应，这会导致按钮关闭窗口、向用户显示消息、验证数据以及几乎任何可以想象的其他类型的响应。

事件是文档对象模型 （DOM） 级别 3 的一部分，每个 HTML 元素都包含一组可以触发 JavaScript 代码的事件。

请仔细阅读这个小教程，以便更好地理解 HTML 事件参考。

JavaScript 事件处理程序

事件处理程序可用作 HTML 元素的属性。它将内联 JavaScript 或函数执行代码作为值。

每当触发任何事件时，它都会调用内联 JavaScript 代码或执行回调函数来执行特定操作。

简单来说，它用于处理事件。

语法

用户可以按照以下语法将事件处理程序与 HTML 元素一起使用。


 <div eventHandler = "JavaScript_code"> </div>

在上面的语法中，你需要将 'eventHandler' 替换为实际的事件处理程序，如 'onclick'、'onmouseover' 等。“JavaScript_code”应执行函数或内联运行 JavaScript。

示例：使用事件处理程序内联 JavaScript

在下面的代码中，我们创建了 <button> 元素。此外，我们还使用了 'onclick' 事件处理程序来捕获按钮上的 click 事件。

我们已经编写了内联 JavaScript 代码来处理该事件。在内联 JavaScript 代码中，'this' 关键字表示 <button> 元素，我们将按钮的文本颜色更改为红色。


<html>
<body>
	 	<h2>单击按钮更改文本的颜色</h2>
	 	<button onclick = "this.style.color='red'"> Click Me </button>
	 	<div id = "output"> </div>
</body>
</html>

示例：具有事件处理程序的函数

在下面的代码中，我们创建了 <div> 元素，并在 <head> 部分给出了样式。

我们将 'onclick' 事件处理程序与 <button> 元素一起使用，该元素在用户单击按钮时调用 handleClick（） 函数。

handleClick（） 函数将 'event' 对象作为参数。在 handleClick（） 函数中，我们使用 JavaScript 更改 <div> 元素的背景颜色。


<html>
<head>
	 	<style>
	 	 	 #test {
	 	 	 	 	width: 600px;
	 	 	 	 	height: 100px;
	 	 	 	 	background-color: red;
	 	 	 }
	 	</style>
</head>
<body>
	 	<div id = "test"> </div> <br>
	 	<button onclick = "handleClick()"> Change Div Color </button>
	 	<script>
	 	 	 function handleClick(event) {
	 	 	 	 	var div = document.getElementById("test");
	 	 	 	 	div.style.backgroundColor = "blue";
	 	 	 }
	 	</script>
</body>
</html>

示例：具有事件处理程序的多个函数

在下面的代码中，我们添加了带有 <div> 元素的 'ommouseenter' 事件处理程序。当用户在 <div> 元素中输入鼠标光标时，我们调用 changeFontSize（） 和 changeColor（） 函数。

changeFontSize（） 函数更改文本的大小，changeColor（） 函数更改文本的颜色。

这样，您就可以对特定事件调用多个函数。


<html>
<head>
	 	<style>
	 	 	 #test {
	 	 	 	 	font-size: 15px;
	 	 	 }
	 	</style>
</head>
<body>
	 	<h2> Hover over the below text to customize the font. </h2>
	 	<div id = "test" onmouseenter = "changeFontSize(); changeColor();"> Hello World! </div> <br>
	 	<script>
	 	 	 function changeFontSize(event) {
	 	 	 	 	document.getElementById("test").style.fontSize = "25px";
	 	 	 }
	 	 	 function changeColor(event) {
	 	 	 	 	document.getElementById("test").style.color = "red";
	 	 	 }
	 	</script>
</body>
</html>

JavaScript 事件对象

处理事件的函数将 'event' 对象作为参数。'event' 对象包含有关事件及其发生的元素的信息。

还有各种属性和方法可用，可以与事件对象一起使用以获取信息。

Object 描述
Event 它是所有事件对象的父级。

以下是不同类型的事件对象的列表。每个事件对象都包含各种事件、方法和属性。

对象/类型 处理
AnimationEvent 处理 CSS 动画。
ClipboardEvent 处理剪贴板的更改。
DragEvent 处理拖放事件。
FocusEvent 处理焦点事件。
HashChangeEvent 处理 URL 的锚点部分的更改。
InputEvent 处理表单输入。
KeyboardEvent 处理用户的键盘交互。
MediaEvent 处理与媒体相关的事件。
MouseEvent 处理用户的鼠标交互。
PageTransitionEvent 处理网页之间的导航。
PopStateEvent 处理页面历史记录中的更改。
ProgressEvent 处理文件加载的进度。
StorageEvent 处理 Web 存储中的更改。
TouchEvent 处理设备屏幕上的触摸交互。
TransitionEvent 处理 CSS 过渡。
UiEvent 处理用户的用户界面交互。
WheelEvent 处理用户的鼠标滚轮交互。
打印本页
上一页
下一页