浅析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实例教程(19) 使用HoTMetal(4)
Dec 23 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
node中使用shell脚本的方法步骤
Mar 23 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在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
javascript里的条件判断
2007/02/27 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
2018/04/17 jQuery
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
python列表与元组详解实例
2013/11/01 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python如何重新加载模块
2020/07/29 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
python常量折叠基础知识点讲解
2021/02/28 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
Oracle快照(snapshot)
2015/03/13 面试题
幼儿园教学管理制度
2014/02/04 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
教师辞职信范文
2015/02/28 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android