浅析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 相关文章推荐
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
js实现延迟加载的方法
Jun 24 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
关于PHP开发的9条建议
2015/07/27 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Python获取Linux系统下的本机IP地址代码分享
2014/11/07 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
华硕新加坡官方网上商店:ASUS Singapore
2020/07/09 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
警察思想汇报
2014/01/04 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
党员个人公开承诺书
2014/08/29 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
学雷锋倡议书
2015/01/19 职场文书
爱心捐助活动总结
2015/05/09 职场文书
指导教师推荐意见
2015/06/05 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书