整理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 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
Webpack的dll功能使用
Jun 28 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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
smarty模板引擎基础知识入门
2015/03/30 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
jquery动态加载图片数据练习代码
2011/08/04 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
JavaScript插件化开发教程 (三)
2015/01/27 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
javascript常用的方法整理
2015/08/20 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
js实现简单的打印表格
2020/01/15 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python Requests 基础入门
2016/04/07 Python
Python Requests安装与简单运用
2016/04/07 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
python去除扩展名的实例讲解
2018/04/23 Python
python实现验证码识别功能
2018/06/07 Python
python使用epoll实现服务端的方法
2018/10/16 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
教室标语大全
2014/06/21 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
迎国庆主题班会
2015/08/17 职场文书
五年级作文之学校的四季
2019/12/05 职场文书