浅析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 相关文章推荐
JS数组(Array)处理函数整理
Dec 07 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
JavaScript实现单例模式实例分享
Dec 22 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
express.js中间件说明详解
Mar 19 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
浅析JavaScript中的变量提升
Jun 01 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
Apache2 httpd.conf 中文版
2006/11/17 PHP
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
Python中for循环详解
2014/01/17 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
python正则表达式面试题解答
2020/04/28 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python 正确保留多位小数的实例
2018/07/16 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
对pandas处理json数据的方法详解
2019/02/08 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python猴子补丁知识点总结
2020/01/05 Python
python实现AdaBoost算法的示例
2020/10/03 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
北体毕业生求职信
2014/02/28 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
小浪底导游词
2015/02/12 职场文书
高中运动会前导词
2015/07/20 职场文书
高中生军训感言
2015/08/01 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
MySQL通过binlog恢复数据
2021/05/27 MySQL
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript