JavaScript 事件机制详解：从基础概念到 HTML4 标准事件

JavaScript 事件机制基础

事件是什么？

JavaScript 与 HTML 的交互，本质上是处理在用户操作或浏览器行为发生时所产生的事件。

页面加载完成时触发一个事件；用户点击按钮时，该点击动作本身也是一个事件。其他常见例子包括按下键盘任意键、关闭窗口或调整窗口大小等。

开发者可以利用这些事件来执行 JavaScript 代码以做出响应。例如，点击按钮可以关闭窗口、弹出消息框、显示提示信息、验证数据，或者触发任何其他类型的用户交互响应。

事件属于文档对象模型（DOM）第三级规范的一部分。每个 HTML 元素都内置了一套可以触发 JavaScript 代码的事件监听器。

具体示例如下：

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

上述代码运行后，当用户点击“Say Hello”按钮时，onclick 事件将被触发，进而执行 sayHello() 函数。

表单提交与 onsubmit 事件

onsubmit 事件类型：

另一个关键的事件类型是 onsubmit。当用户尝试提交表单时，会引发此事件。因此，开发者可以利用该事件类型来实现表单数据的验证逻辑。

以下是一个简单的用法示例。在将表单数据提交到 Web 服务器之前，程序会调用 validate() 函数。如果 validate() 函数返回 true，则表单数据将被提交；否则，提交操作将被阻止。 示例代码：

<html>
<head>
<script type="text/javascript">
<!--
function validation() {
  all validation goes here
  .........
  return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>

鼠标交互：onmouseover 与 onmouseout

onmouseover 和 onmouseout 事件：

这两个事件类型有助于创建包含图片或文字的视觉效果。当鼠标指针移动到某个元素上方时，触发 onmouseover 事件；当鼠标指针从元素上移开时，触发 onmouseout 事件。 示例代码：

以下示例展示了分组响应机制：

<html>
<head>
<script type="text/javascript">
<!--
function over() {
  alert("Mouse Over");
}
function out() {
  alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

HTML 4 标准事件概览

利用这两个事件类型，可以切换显示不同的图像，或者创建辅助用户操作的提示效果。 HTML 4 标准事件

此处列出了标准的 HTML4 事件供参考。下方的脚本展示了用于对该事件执行操作的 JavaScript 函数功能。