整理Javascript事件响应学习笔记


Posted in Javascript onDecember 02, 2015

什么是事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

 1、鼠标单击事件(onclick)
onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。
例:我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2()。

<html>
 <head>
 <script type="text/javascript">
 function add2(){
 var numa,numb,sum;
 numa=6;
 numb=8;
 sum=numa+numb;
 document.write("两数和为:"+sum); }
 </script>
 </head>
 <body>
 <form>
 <input name="button" type="button" value="点击提交" onclick="add2()" />
 </form>
 </body>
 </html>

注意: 在网页中,如使用事件,就在该元素中设置事件属性。

2、鼠标经过事件(onmouseover)
鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。
当鼠标经过"确定"按钮后,调用message()函数,弹出消息对话框。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> 鼠标经过事件 </title>
 <script type="text/javascript">
 function message(){
 confirm("请输入密码后,再单击确定!"); }
 </script>
 </head>
 <body>
 <form>
 密码:
 <input name="password" type="password" >
 <input name="确定" type="button" value="确定" onmouseover="message()"/>
 </form>
 </body>
 </html>

3、鼠标移开事件(onmouseout)
鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
当鼠标移开"点击我"的按钮时,调用message()函数,弹出消息对话框。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>鼠标移开事件 </title>
 <script type="text/javascript">
 function message(){
 alert("不要移开,点击后进行慕课网!"); }
 </script>
 </head>
 <body>
 <form>
 <a href="http://www.imooc.com" onmouseout="message()">点击我</a>
 </form>
 </body>
 </html>

4、光标聚焦事件(onfocus)
当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。
当下拉列表得到焦点时,调用message()函数,就弹出对话框“"请选择,您现在的职业!”。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> 光标聚焦事件 </title>
 <script type="text/javascript">
 function message(){
 alert("请选择,您现在的职业!");
 }
 </script>
 </head>
 <body>
 请选择您的职业:<br>
 <form>
 <select name="career" onfocus="message()"> 
  <option>学生</option> 
  <option>教师</option> 
  <option>工程师</option> 
  <option>演员</option> 
  <option>会计</option> 
 </select> 
 </form>
 </body>
</html>

5、失焦事件(onblur)
onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 失焦事件 </title>
 <script type="text/javascript">
 function message(){
 alert("请确定已输入密码后,在移开!"); }
 </script> 
 </head>
 <body>
 <form>
 用户:
 <input name="username" type="text" value="请输入用户名!" >
 密码:
 <input name="password" type="text" value="请输入密码!" onblur="message()">
</form>
 </body>
 </html>

6、内容选中事件(onselect)
选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
当选中个人简介文本框中文字时,触发onselect事件,并弹出对话框。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 内容选中事件 </title>
 <script type="text/javascript">
 function message(){
 alert("您触发了选中事件!"); }
 </script> 
 </head>
 <body>
 <form>
 个人简介:<br>
 <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea>
</form>
 </body>
 </html>

7、文本框内容改变事件(onchange)
通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 文本框内容改变事件 </title>
 <script type="text/javascript">
 function message(){
 alert("您改变了文本内容!"); }
 </script> 
 </head>
 <body>
 <form>
 个人简介:<br>
 <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介,不少于200字!</textarea>
</form>
 </body>
 </html>

8、加载事件(onload)
事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意: 1. 加载页面时,触发onload事件,事件写在<body>标签内。

    2. 此节的加载页面,可理解为打开一个新页面时。
如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 加载事件 </title>
 <script type="text/javascript">
 function message(){
 alert("加载中,请稍等…"); }
 </script> 
 </head>
 <body onload="message()">
 欢迎学习JavaScript。
 </body>
</html>

9、卸载事件(onunload)

当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。

注意:不同浏览器对onunload事件支持不同。

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title> 卸载事件 </title>
 <script type="text/javascript"> 
 window.onunload = onunload_message; 
 function onunload_message(){ 
  alert("您确定离开该网页吗?"); 
 } 
 </script> 
 </head>
 <body onunload="onunload_message">
 欢迎学习JavaScript。
</body>
</html>

测试结果发现只有在IE浏览器里执行,其他浏览器不执行。

以上就是关于Javascript事件响应的九种状态,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 #Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 #Javascript
原生JavaScript实现异步多文件上传
Dec 02 #Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 #Javascript
日常收藏的jquery技巧
Dec 02 #Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 #Javascript
jquery密码强度校验
Dec 02 #Javascript
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
UCenter 批量添加用户的php代码
2012/07/17 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
python中精确输出JSON浮点数的方法
2014/04/18 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
导致python中import错误的原因是什么
2020/07/01 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
学校办公室主任职责
2013/12/27 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
四个太阳教学反思
2014/02/01 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
《社戏》教学反思
2016/02/22 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL