整理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 相关文章推荐
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
自己动手开发jQuery插件教程
Aug 25 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
百度地图api如何使用
Aug 03 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
使用refresh_token实现无感刷新页面
Apr 26 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
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
php文件包含的几种方式总结
2019/09/19 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
2015/03/03 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
Python多线程学习资料
2012/12/19 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python实现通讯录功能
2018/02/22 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
C语言编程题
2015/03/09 面试题
实习鉴定评语
2014/01/19 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
2014年减负工作总结
2014/12/10 职场文书
深入理解go缓存库freecache的使用
2022/02/15 Golang
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js