事件是什么?
JavaScript 与 HTML 的交互是通过事件来处理的,当用户或浏览器操纵页面时。事件就会发生。
当页面加载时,这是一个事件。当用户单击一个按钮,点击,是一个事件。另一个例子的事件就像按任何键,关闭窗口,调整窗口等。
开发人员可以使用这些事件来执行 JavaScript 编码的响应,如导致按钮关闭窗口,信息显示给用户,数据验证,和任何其他类型的反应的发生。
事件都是文档对象模型(DOM)三级的一部分,并且每个HTML元素有一定的事件可以触发 JavaScript 代码。
请通过这个小教程为更好地理解 HTML 事件参考。这里我们将看到一些例子来理解事件和 JavaScript 之间的关系:
onclick 事件类型
这是最常用的事件类型,当用户点击鼠标左按钮。你可以把你的验证、警告等反对这个事件类型。
例子
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
它将产生以下结果,然后当你点击你好按钮 onclick 事件将发生,将触发 sayHello() 函数。
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>
onsubmit 事件类型
另一个最重要的是 onsubmit 事件类型。这个事件发生在您尝试提交一个表单。所以你可以用此事件类型进行表单验证。
下面一个简单简单的例子显示其用法。我们在这里调用 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 事件发生时,当你把你的鼠标在任何元素上时, 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 事件被列在这里,供您参考。执行以下脚本显示一个Javascript函数。