JavaScript事件(含Demo)

主要事件:

　　onclick　　鼠标单击事件

　　onmouseover 鼠标经过事件

　　onmouseout　　鼠标移开事件

　　onchange　　文本框内容改变事件

　　onselect　　文本框内容被选中事件

　　onfocus　　光标聚集

　　onblur　　光标离开

　　onload　　网页导入

　　onunload　关闭网页

 1 <!DOCTYPE html>
 2 <html>
 3  <head>
 4      <meta charset="utf-8">
 5   <title> 事件</title>  
 6   <script type="text/javascript">
 7    function count(){
 8        
 9        var result="";
10        
11     //获取第一个输入框的值
12     var num1 = document.getElementById("txt1").value;
13     //获取第二个输入框的值
14     var num2 = document.getElementById("txt2").value;
15     //获取选择框的值
16     var op = document.getElementById("select").value;
17     //获取通过下拉框来选择的值来改变加减乘除的运算法则
18     switch(op){
19         case "+":
20             result = parseFloat(num1) +parseFloat(num2);
21             break;
22         case "-":
23             result =  parseFloat(num1) -parseFloat(num2);
24             break;
25         case "*":
26             result =  parseFloat(num1) *parseFloat(num2);
27             break;
28         case "/":
29             if(parseFloat(num2) === 0){
30                 var con = confirm("被除数不能为0！");
31                 break;
32             }
33             result =  paresFloat(num1) / paresFloat(num2);
34             break;
35     }
36     //设置结果输入框的值 
37         document.getElementById("fruit").value = result;
38    }
39   </script> 
40  </head> 
41  <body>
42    <input type='text' id='txt1' /> 
43    <select id='select'>
44         <option value='+'>+</option>
45         <option value="-">-</option>
46         <option value="*">*</option>
47         <option value="/">/</option>
48    </select>
49    <input type='text' id='txt2' /> 
50    <input type='button' value=' = '  onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果--> 
51    <input type='text' id='fruit' onfocus="count()"/>   
52  </body>
53 </html>