浅析JavaScript中的事件机制
作者：goldensun 时间：2024-05-03 15:58:38
事件是什么 ?
JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理。
当页面加载，这是一个事件。当用户点击一个按钮，这一下，也就是一个事件。事件的另一个例子是类似按下任意键，关闭窗口，调整窗口等。
开发者可以使用这些事件执行JavaScript编码响应，这引起按钮以关闭视窗，消息，以便显示给用户，要验证的数据，以及几乎任何其它类型的响应可以发生的。
事件是文档对象模型(DOM)第3级，每一个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>
这将产生以下结果，当你点击“Hello”按钮，然后会的onclick事件的发生将触发sayHello()函数。
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:
这两个事件类型将帮助创建图片甚至用文字以及不错的效果。当把鼠标在任何元素，当从元素把鼠标移出发生onmouseout事件，移过时发生 onmouseover 事件。
例子：
下面的例子说明，分组反应如下：
<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 标准事件
标准的HTML4事件列在这里，供大家参考。下面的脚本显示一个Javascript函数功能以对该事件执行。
标签：JavaScript,事件
0
投稿猜你喜欢
python解析xml文件实例分析
2021-02-17 03:25:18
前后端常见的几种鉴权方式(小结)
2024-05-02 17:05:54
Python处理文本换行符实例代码
2021-08-19 18:31:51
Python学习之异常中的finally使用详解
2021-09-08 02:21:38
vue动态添加表单validateField验证功能实现
2023-07-02 17:03:27
go-micro微服务domain层开发示例详解
2024-04-26 17:25:04
详解Angular之constructor和ngOnInit差异及适用场景
2024-05-11 09:18:16
Python如何在windows环境安装pip及rarfile
2021-01-12 18:00:21
Python类继承和多态原理解析
2023-04-30 17:31:38
Tensorflow使用支持向量机拟合线性回归
2021-01-20 03:38:42
js添加千分位的实现代码(超简单)
2023-08-25 07:43:29
详解git使用小结（本地分支与远程分支、git命令）
2022-03-05 21:22:32
Pytorch 实现冻结指定卷积层的参数
2023-05-22 07:27:21
我所理解的网页推广设计的几个要点
2011-01-25 12:37:00
一些常用的Python爬虫技巧汇总
2021-01-02 22:51:56
Python网页正文转换语音文件的操作方法
2021-03-26 04:27:30
浅谈uniapp页面跳转的解决方案
2023-08-23 01:45:51
基于vue.js路由参数的实例讲解——简单易懂
2024-05-29 22:48:25
VSCode远程连接其他主机的WSL2的问题
2022-07-05 05:24:19
python包导入的两种方式
2022-11-25 22:49:30
