您可以在事件发生时执行JavaScript,例如用户单击鼠标,加载图像,当用户单击HTML元素,提交HTML表单等时。事件是文档对象模型(DOM)级别的一部分3,每个HTML元素都包含一组事件,这些事件可以触发JavaScript代码。
让我们看一个示例,它允许您从事件处理程序中调用函数以更改文本
<!DOCTYPE html>
<html>
<body>
<p onclick="myEvent(this)">Click me</p>
<script>
function myEvent(id) {
id.innerHTML = "Welcome!";
}
</script>
</body>
</html>在这里,我们将看到一些示例来了解Event和JavaScript之间的关系。
这是最常用的事件类型,在用户单击其鼠标左键时发生。您可以针对此事件类型进行验证,警告等。
请尝试以下示例。
<html>
<head>
<script>
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>这两种事件类型将帮助您使用图像甚至文本创建漂亮的效果。将鼠标移到任何元素上时会触发onmouseover事件,而将鼠标从该元素上移出时会触发onmouseout事件。
请尝试以下示例。
<html>
<head>
<script>
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>