浅析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 用6N±1法求素数 实例教程
Oct 20 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
原生js实现给指定元素的后面追加内容
Apr 10 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
详解Angular 4.x Injector
May 04 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
js实现详情页放大镜效果
Oct 28 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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
详解Django通用视图中的函数包装
2015/07/21 Python
python 统计代码行数简单实例
2017/05/04 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Selenium的使用详解
2018/10/19 Python
python range实例用法分享
2020/02/06 Python
python 函数中的参数类型
2020/02/11 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
家长给幼儿园的表扬信
2014/01/09 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
文秘人员工作职责
2014/01/31 职场文书
工程专业应届生求职信
2014/02/19 职场文书
安全责任书范本
2014/04/15 职场文书
《梅花魂》教学反思
2014/04/30 职场文书
赔偿协议书范本
2014/09/12 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书