浅析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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
收藏一些不常用,但是有用的代码
Mar 12 Javascript
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
深入理解vue路由的使用
Mar 24 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
《绿色蝈蝈》教学反思
2014/03/02 职场文书
如何写好自荐信
2014/04/07 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
2015毕业寄语大全
2015/02/26 职场文书
小学运动会加油词
2015/07/18 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
MySQL创建管理RANGE分区
2022/04/13 MySQL