浅析JavaScript中的事件机制


Posted in Javascript onJune 04, 2015

 事件是什么 ?

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中的事件机制

Javascript 相关文章推荐
有关javascript的性能优化 (repaint和reflow)
Apr 12 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 #Javascript
JavaScript中Function()函数的使用教程
Jun 04 #Javascript
JavaScript中的函数嵌套使用
Jun 04 #Javascript
JavaScript函数使用的基本教程
Jun 04 #Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 #Javascript
js动态创建及移除div的方法
Jun 03 #Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 #Javascript
You might like
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
对Python信号处理模块signal详解
2019/01/09 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
python实现登录与注册系统
2020/11/30 Python
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
品质保证书格式
2015/02/28 职场文书
委托书范本格式
2019/04/18 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers