浅析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 判断undefined的实现代码
Nov 26 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
JavaScript中的函数(二)
Dec 23 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
解析Python中while true的使用
2015/10/13 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
对python周期性定时器的示例详解
2019/02/19 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
会计职业生涯规划书
2014/01/13 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
竞选部长演讲稿
2014/04/26 职场文书
成立公司计划书
2014/05/07 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers