浅析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不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
Dec 03 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
基于JavaScript实现轮播图效果
Jan 02 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
德生H-501的评价与改造
2021/03/02 无线电
一个程序下载的管理程序(三)
2006/10/09 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
js实现日历的简单算法
2017/01/24 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
Python Tkinter基础控件用法
2014/09/03 Python
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
python读取和保存视频文件
2018/04/16 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python二进制文件的转译详解
2019/07/03 Python
详解Python打包分发工具setuptools
2019/08/05 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
小学生获奖感言范文
2014/02/02 职场文书
企业党员一句话承诺
2014/05/30 职场文书
社区重阳节活动总结
2015/03/24 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书