浅析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 相关文章推荐
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 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
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
jquery 插件学习(五)
2012/08/06 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
javascript每日必学之继承
2016/02/23 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
The North Face北面德国官网:美国著名户外品牌
2018/12/12 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
《第一次抱母亲》教学反思
2014/04/16 职场文书
学校运动会报道稿
2014/09/23 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
房屋过户委托书范本
2014/10/07 职场文书
团组织推优材料
2014/12/29 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技