浅析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之十二 删除事件核心方法
Jul 31 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
JavaScript获取路径设计源码
May 22 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
javascript定义类和类的实现实例详解
Dec 01 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
使用node.js搭建服务器
May 20 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
Jquery中基本选择器用法实例详解
2015/05/18 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue-router单页面路由
2017/06/17 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
详解Python中最难理解的点-装饰器
2017/04/03 Python
python实现决策树分类算法
2017/12/21 Python
简述Python2与Python3的不同点
2018/01/21 Python
详解【python】str与json类型转换
2019/04/29 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
同学会邀请书大全
2014/01/12 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
教师节活动总结
2014/08/29 职场文书
人大代表选举标语
2014/10/07 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2016公司年会通知范文
2015/04/25 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书