JavaScript进阶（二）

什么是事件

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

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

主要事件表:

光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

如下代码, 当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

运行结果：

 1 <!DOCTYPE HTML>

 2 <head>

 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 4 <title> 光标聚焦事件 </title>

 5   <script type="text/javascript">

 6     function message(){

 7       alert("请选择，您现在的职业！");

 8     }

 9   </script>

10 </head>

11 <body>

12 请选择您的职业：<br>

13   <form>

14     <select name="career" onfocus="message()">

15       <option>学生</option>

16       <option>教师</option>

17       <option>工程师</option>

18       <option>演员</option>

19       <option>会计</option>

20     </select>

21   </form>

22 </body>

23 </html>

失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。

运行结果：

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

效果图：

内容选中事件（onselect）

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

如下代码,当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。

运行结果：

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

运行结果如下：

文本框内容改变事件（onchange）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

如下代码,当用户将文本框内的文字改变后，弹出对话框“您改变了文本内容！”。

运行结果：

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

运行效果图如下：

加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。

2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

运行结果：

onload事件只可以放在<body>标签中吗

onload事件只可以放在<body>标签中吗，还是可以放在不同的地方？它放在不同的地方有什么不一样的含义吗？

答：当然可以放到外面。在实际开发中，为了使结构清晰，表现与行为分离，JS代码并不推荐写在html结构里或者页面。推荐放在JS的文件里。如果要分离出来，代码是：window.onload=message;

注意，在这里是window.onload=message;而不是window.onload=message（）;这两者是有区别的：

window.onload=message();这种写法在程序运行到这句时，先执行message()函数，然后将message的返回值赋给window.onload。
window.onload=message;这种写法是在网页加载完成后，调用message()方法。
建议使用window.onload=函数名;这种写法，不容易出错。window.onload=函数名();有些浏览器不买单滴

卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

注意：不同浏览器对onunload事件支持不同。

如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。

运行结果：（IE浏览器）

编程练习

使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1；取值：var = document.getElementById(“id”）.value；

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

运行结果如下：