【JavaScript学习】-事件响应，让网页交互

什么是事件：

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

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表：

事件1：onclick

说明：onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

实例代码：比如，我们单击按钮时，触发 onclick 事件，并调用openwin()函数,代码如下：

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>单击事件 </title>
 <script type="text/javascript">
   function openwin(){
      window.open('http://www.cnblogs.com/Lohasworld/','_blank','height=600,width=400,top=100,　　　　 toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
 </script>
 </head>
 <body>
   <form>
     <input name="点击我" type="button" value="点击我" onclick="openwin()"/>
   </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>
 6　　 <script type="text/javascript">
     　　function message(){
       　　confirm("请输入密码后，再单击确定!"); }
 　　</script>
 </head>
 <body>
 　　<form>
 　　　　密码:<input name="password" type="password" >
 　　　　<input name="确定" type="button" value="确定"onmouseover="message()"/>
15　　 </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.cnblogs.com/Lohasworld/" 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事件，同时执行被调用的程序。

实例代码：比如，当光标从密码文本框离开时，触发onblur 事件，调用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>
    用户:<input name="username" type="text" value="请输入用户名！" onblur="message()" >
    密码:<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）

说明：选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

实例代码：比如，改变文本框内容时，调用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>
   个人简介：<br>
    <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
   </form>
 </body>
 </html>

注：改变后光标离开（点击其他地方）才能触发事件

事件8：加载事件（onload）

说明：事件会在页面加载完成后，立即发生，同时执行被调用的程序。

实例代码：比如，加载页面时，弹出对话框“加载中，请稍等…”。代码如下：

 <!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>

注：1. 加载页面时，触发onload事件，事件写在<body>标签内。

2. 加载页面，可以理解为打开一个新页面。

事件9：卸载事件（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>

注：不同浏览器对onunload事件支持不同。(我用此段代码试了一下我电脑上所有的浏览器：IE11,Chrome50.0.2661.102 m,Microsoft Edge25.10568.0.0)

　　/*然后我发现事情跟我预料的不一样【惊奇脸】，事情是这样的：

　　　　我直接新建了一个文本文档，把代码复制到里面，并把文件后缀名强制改成了.html（因为懒得打开我电脑装的DW这么大型的软件，而且我电脑配置不是很高，现在已经打开很多软件了），用三个浏览器打开这个页面均出现了一段乱码，但是JS的事件执行了，即关闭页面时显示提示消息了，只不过提示消息也是一段乱码。

　　　　于是我考虑，可能出现这样的问题：因为只有中文的显示有问题，包括页面中显示的文字里也只有中文变成乱码，英文没问题，所以我猜测记事本的中文格式或者编码与html的不太兼容balabala

　　　　考虑到这，我用DW打开了这个文件，果然代码里所有中文都变成了乱码，修改完以后，我继续用三个浏览器调试。

　　IE11：在允许网页运行脚本的情况下，刷新及关闭页面都能弹出提示消息

　　Chrome50.0.2661.102 m：并不能弹出提示消息，翻遍了设置也没找到关于禁止脚本的选项

　　Microsoft Edge25.10568.0.0：同上

综合实例训练：

说明：使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击等于号，能在第三个输入框给出2个整数的加减乘除运算结果。

思路要点：1.body中一共有四个input输入框：三个的type是text，一个是button。还有一个选择列表，设置四个option；

　　　　　 2.给“=”button设置一个onclick事件，点击触发count函数

　　　　 3. 获取两个输入框中的值和获取选择框的值：document.getElementById("id").value

　　　　　　给结果输入框赋值：document.getElementById("id").value=1

　　　　　 4.获取通过下拉框来选择的值来改变加减乘除的运算法则：

<select>
    <option></option>
</select>

　　　　 5.用switch来判断运算法则：通过判断上面第3点里面获取到的选择框的值

代码：

 <!DOCTYPE html>
 <html>
  <head>
   <title> 事件</title>
   <script type="text/javascript">
    function count(){
     var txt1=parseInt(document.getElementById("txt1").value);
     var txt2=parseInt(document.getElementById("txt2").value);
     var select = document.getElementById('select').value;
     var result;
     switch(select)
     {
         case '+':
             result=txt1+txt2;
             break;
         case '-':
             result=txt1-txt2;
             break;
         case '*':
             result=txt1*txt2;
             break;
         case '/':
             result=txt1/txt2;
             break;
     }
     document.getElementById("fruit").value = result;
    }
   </script>
  </head> 

 <body>
     <input type="text" id="txt1"/>
     <select id="select">
         <option value='+'>+</option>
         <option value='-'>-</option>
         <option value='*'>*</option>
         <option value='/'>/</option>
     </select>
     <input type="text" id="txt2"/>
     <input type="button" value="=" onClick="count()"/>
     <input type="text" id="fruit"/>
 </body>
 </html>

BUG以及修改：

问题1：输入数字后，点击等于号没反应

思考原因：可能出现问题的有几个点：“=”按钮的onclick事件未设置好；未成功得到txt1和txt2的值导致运算无结果；算出结果后未对结果输入框成功赋值；

解决方法：逐点检查，发现获取txt1和txt2的值时，“document.getElementById("id").value”语句缺少“document.”，添加后运行成功。

问题2：输入1+1后，得到11；输入12+21，得到1221

思考原因：输入1+1得到11，是因为加法运算单纯把字符串相连，说明txt1和txt2获取到的值是字符串而不是数字

解决方法：通过parseInt()函数，可以将字符串转换为数值

OK，今天这节关于JS事件响应的学习就到这啦，边学边做笔记印象很深刻~

代码量：197行

时间：2016.5.24

【JavaScript学习】-事件响应，让网页交互的更多相关文章

JavaScript高级用法一之事件响应与网页交互
综述本篇的主要内容来自慕课网,事件响应与网页交互,主要内容如下 1 什么是事件 2 鼠标单击事件( onclick ) 3 鼠标经过事件(onmouseover) 4 鼠标移开事件(onmouseo ...
浅谈JavaScript的事件响应
原文出处: Christian Heilmann 译文出处:Chajn Science 每当猴子们问我JavaScript和DOM里啥东西最牛逼时,我都会一巴掌打回去:卧槽还用问么当然是事件响应了 ...
JS学习-事件响应小结-简单的计算器
<!DOCTYPE html> <html> <head> <title> 事件</title> <script type=" ...
JS事件－让网页交互
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
JavaScript事件响应的基础语法总结
1.onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用 //例子 <html> <head> ...
学习笔记1－－响应式网页＋Bootstrap起步＋全局CSS样式
一.学习之前要了解一些背景知识: 在2g时代,3g时代,4g时代,早期的网页浏览设备,功能机,智能机.(本人最喜欢的透明肌,和古典黑莓机) 1.什么是响应式网页? Responsive Web Pag ...
Qt和JavaScript使用QWebChannel交互一——和Qt内嵌网页交互
Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互目录 Qt和JavaScript使用QWebChannel交互一--和Qt内嵌网页交互前言一.效果二.实现过程 ...
JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
Legolas工业自动化平台入门（三）交互事件响应动作
在上一篇Legolas工业自动化平台入门(二)数据响应动作一文中,我们介绍了"动作"相关内容,了解到"动作"分为多种,各种动作的添加方式相同,但是应用方式各自 ...

随机推荐

ST-4
1.(49-7)使用下面的方法printPrimes()完成后面的问题: (a)为printPrimes()方法画控制流图. (b)考虑测试用例t1=(n=3)和t2=(n=5).即使这些测试用例游历 ...
Ajaxfileupload 总结（包括插件处理json格式bug的解决方案）
Ajaxfileupload 是一款轻量级js的上传插件,简单容易上手,今天简单学习了下. 1,引用jquery和Ajaxfileupload .js <script src="~/S ...
Java核心技术卷I chapter05 继承
2017年4月10日19:41:44 仅仅用于打好基础 1. 在Java中,所有的继承都是公有继承,而没有C++中的私有继承和保护继承! 2.关键字super的使用方法: (1) 子类中想调用父类中的 ...
关于cisco ccp 或sdm管理gns3中思科路由器的成功分享
本来工作环境中有一台c1841,闲来无事,升级了最新的IOS=c1841-adventerprisek9-mz.151-4.M6.bin,在xp虚拟机中安装sdm(新windows系统不支持)和在wi ...
通过HPS控制FPGA端的GPIO
该笔记主要记录HPS端如何通过AXI Bridge控制FPGA端口的GPIO,主要是如何操作FPGA侧的Led 1.AXI Bridge AXIB主要包括H2FB.F2HB.LWH2F ...
C++ 中的一些错觉
1. 默认构造函数和不带参数的构造函数之间无联系默认构造函数是编译器发现类不存在显式构造函数时自动生成的无参数的构造函数.同样,用户可以定义显示的无参数构造函数. 2. 在构造函数.析构函数中调用v ...
TP框架命名空间与第三方类
命名空间相当于虚拟目录所有类文件都放在虚拟目录功能:实现自动加载类 TP框架的命名空间要更复杂内容=> 命名空间中定义和使用都用\1初始命名空间相当于根目录如:Library文件 ...
EntityFramework6.X 之DbContex
DbContext 数据库上下文DbContext是ObjectContext代表之一负责管理在运行时从数据库取数据.跟踪数据库的变更.对实体类映射到数据中持久化操作等,表示工作单元和存储库模式的组合 ...
Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
让xcode8支持7.0的设备
升级到xcode8之后发现不能支持7.0设备 1 . 下载文件将文件覆盖到 /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS. ...

【JavaScript学习】-事件响应，让网页交互

【JavaScript学习】-事件响应，让网页交互的更多相关文章

随机推荐

热门专题