浅析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 function、指针及内置对象
Feb 19 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
extjs 列表框(multiselect)的动态添加列表项的方法
Jul 31 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
原生js实现验证码功能
Mar 16 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 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
关于时间计算的结总
2006/12/06 PHP
PHP HTML代码串截取代码
2008/12/29 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php操作access数据库的方法详解
2017/02/22 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
js 浏览器事件介绍
2012/03/30 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
为什么说python更适合树莓派编程
2020/07/20 Python
HTML5的革新 结构之美
2011/06/20 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
追悼会上的答谢词
2014/01/10 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
药学职务聘任书
2014/03/29 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
庆元旦主持词
2015/07/06 职场文书