JavaScript学习-事件响应，让网页交互
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript学习-事件响应，让网页交互相关的知识，希望对你有一定的参考价值。
什么是事件：
javascript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。
主要事件表：
事件1：onclick
说明：onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
实例代码：比如，我们单击按钮时，触发 onclick 事件，并调用openwin()函数,代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>单击事件 </title> 6 <script type="text/javascript"> 7 function openwin(){ 8 window.open(‘http://www.cnblogs.com/Lohasworld/‘,‘_blank‘,‘height=600,width=400,top=100,
toolbar=no,left=0,menubar=no,scrollbars=no,status=no‘);} 9 </script> 10 </head> 11 <body> 12 <form> 13 <input name="点击我" type="button" value="点击我" onclick="openwin()"/> 14 </form> 15 </body> 16 </html>
事件2：onmouseover
说明：鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
实例代码： 比如，当鼠标经过"确定"按钮后，调用message()函数，弹出消息对话框。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title> 鼠标经过事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 confirm("请输入密码后，再单击确定!"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 密码:<input name="password" type="password" > 14 <input name="确定" type="button" value="确定"onmouseover="message()"/> 15 </form> 16 </body> 17 </html>
事件3：onmouseout
说明：鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
实例代码：比如，当鼠标移开"点击我"的按钮时，调用message()函数，弹出消息对话框。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>鼠标移开事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("不要移开，点击后进入作者的博客园!"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 <a href="http://www.cnblogs.com/Lohasworld/" onmouseout="message()">点击我</a> 14 </form> 15 </body> 16 </html>
事件4：光标聚焦事件（onfocus）
说明：当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
实例代码：比如，当下拉列表得到焦点时，调用message()函数，就弹出对话框“"请选择，您现在的职业！”。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title> 光标聚焦事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("请选择，您现在的职业！"); 9 } 10 </script> 11 </head> 12 <body> 13 请选择您的职业：</br> 14 <form> 15 <select name="career" onfocus="message()"> 16 <option>学生</option> 17 <option>教师</option> 18 <option>工程师</option> 19 <option>演员</option> 20 <option>会计</option> 21 </select> 22 </form> 23 </body> 24 </html>
注：光标聚焦不是指鼠标箭头来到某处，而是点击某处
事件5：失焦事件（onblur）
说明：onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
实例代码：比如，当光标从密码文本框离开时，触发onblur 事件，调用message()函数。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 失焦事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("请确定已输入密码后，在移开!"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 用户:<input name="username" type="text" value="请输入用户名！" onblur="message()" > 14 密码:<input name="password" type="text" value="请输入密码！" onblur="message()" > 15 </form> 16 </body> 17 </html>
事件6：内容选中事件（onselect）
说明：选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
实例代码：比如，当选中个人简介文本框中文字时，触发onselect事件，并弹出对话框。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 内容选中事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("您触发了选中事件！"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 个人简介：<br> 14 <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea> 15 </form> 16 </body> 17 </html>
事件7：文本框内容改变事件（onchange）
说明：选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
实例代码：比如，改变文本框内容时，调用message()函数，弹出对话框“您改变了文本内容！”。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 文本框内容改变事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("您改变了文本内容！"); } 9 </script> 10 </head> 11 <body> 12 <form> 13 个人简介：<br> 14 <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea> 15 </form> 16 </body> 17 </html>
注：改变后光标离开（点击其他地方）才能触发事件
事件8：加载事件（onload）
说明：事件会在页面加载完成后，立即发生，同时执行被调用的程序。
实例代码：比如，加载页面时，弹出对话框“加载中，请稍等…”。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 加载事件 </title> 6 <script type="text/javascript"> 7 function message(){ 8 alert("加载中，请稍等…"); } 9 </script> 10 </head> 11 <body onload="message()"> 12 欢迎学习JavaScript。 13 </body> 14 </html>
注：1. 加载页面时，触发onload事件，事件写在<body>标签内。
2. 加载页面，可以理解为打开一个新页面。
事件9：卸载事件（onunload）
说明：当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
实例代码：比如，关闭页面时，弹出对话框“您确定离开网页吗？”。代码如下：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title> 卸载事件 </title> 6 <script type="text/javascript"> 7 window.onunload = onunload_message; 8 function onunload_message(){ 9 alert("您确定离开该网页吗？"); 10 } 11 </script> 12 </head> 13 <body onunload="onunload_message()"> 14 欢迎共同学习Javascript^_^ 15 </body> 16 </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点里面获取到的选择框的值
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 事件</title> 5 <script type="text/javascript"> 6 function count(){ 7 var txt1=parseInt(document.getElementById("txt1").value); 8 var txt2=parseInt(document.getElementById("txt2").value); 9 var select = document.getElementById(‘select‘).value; 10 var result; 11 switch(select) 12 { 13 case ‘+‘: 14 result=txt1+txt2; 15 break; 16 case ‘-‘: 17 result=txt1-txt2; 18 break; 19 case ‘*‘: 20 result=txt1*txt2; 21 break; 22 case ‘/‘: 23 result=txt1/txt2; 24 break; 25 } 26 document.getElementById("fruit").value = result; 27 } 28 </script> 29 </head> 30 31 <body> 32 <input type="text" id="txt1"/> 33 <select id="select"> 34 <option value=‘+‘>+</option> 35 <option value=‘-‘>-</option> 36 <option value=‘*‘>*</option> 37 <option value=‘/‘>/</option> 38 </select> 39 <input type="text" id="txt2"/> 40 <input type="button" value="=" onClick="count()"/> 41 <input type="text" id="fruit"/> 42 </body> 43 </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学习-事件响应，让网页交互的主要内容，如果未能解决你的问题，请参考以下文章