整理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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
JavaScript模拟实现键盘打字效果
Jun 29 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
vue实现多级菜单效果
Oct 19 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php printf输出格式使用说明
2010/12/05 PHP
php 去除html标记--strip_tags与htmlspecialchars的区别详解
2013/06/26 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
jQuery使用手册之一
2007/03/24 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python引用模块和查找模块路径
2016/03/17 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python类的继承super相关原理解析
2020/10/22 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
综合测评自我鉴定
2013/10/08 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers