浅析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 相关文章推荐
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
vue 中swiper的使用教程
May 22 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
JavaScript 继承详解(二)
2009/07/13 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python sqlite3事务处理方法实例分析
2017/06/19 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
Python实现图片添加文字
2019/11/26 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
财会专业大学生求职信
2014/09/26 职场文书
严以律己学习心得体会
2016/01/13 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
Go语言中break label与goto label的区别
2021/04/28 Golang
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis