首页 > 技术文章 > 关于JavaScript事件与函数

degui 2018-05-09 23:08 原文

  如果事件在特定条件下触发的行为,那么函数是实现特定功能的行为的具体的体现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>event对象属性</title>
<script type="text/javascript">
    function catchEvent(){
        var eventSrcID = event.srcElement.id;
        var eventtype = event.type;
        alert(eventSrcID+"捕获"+eventtype+"事件");
        }
        
    function getPosition(){
        var x = event.clientX;
        var y = event.clientY;
        window.status = "鼠标的坐标("+x+","+y+")";
    }
</script>
</head>
<body style="font-size:14px">
<img src="snow.jpg" onclick="catchEvent();" onmousemove="getPosition();"/>
</body>
</html>
event对象属性
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>表单事件示例</title>
 6 <style type="text/css">
 7      div input,select{
 8         width:130px;}
 9 </style>
10 <script type="text/javascript">
11     /*得到焦点*/
12     function textFocus(obj){
13         obj.style.background="#33f";}
14     /*失去焦点*/
15     function textblur(obj){
16         obj.style.background="#ff5";}
17     /*数据验证*/    
18     function verifySubmit(){
19         if(document.getElementById("name").value==""){
20            alert("姓名不能为空");
21            document.getElementById("name").focus();
22             return false;
23             }
24         if(document.getElementById("pwd").value==""){
25            alert("密码不能为空");
26            document.getElementById("pwd").focus();
27         return false;
28             }    
29           if(document.getElementById("sex").value==""){
30            alert("请选择性别");
31            document.getElementById("sex").focus();
32         return false;
33             }
34         if(document.getElementById("email").value==""){
35            alert("请填写email");
36            document.getElementById("email").focus();
37         return false;
38             }    
39         return true;        
40         }
41 </script>
42 </head>
43 <body style="font-size:14px">
44 <form  name="form"  onsubmit="return verifySubmit()">
45     <div>
46      <table bordercolor="#33FFFF">
47       <tr>
48         <td>姓 名:</td>
49         <td><input type="text" id="name" onfocus="textFocus(this)" onblur="textblur(this)"/></td>
50       </tr>
51       <tr>
52         <td>密 码:</td>
53         <td><input type="password" id="pwd" onfocus="textFocus(this)" onblur="textblur(this)"/></td>
54       </tr>
55        <td>性 别:</td>
56         <td>
57          <select id="sex">
58             <option value="">--------请选择--------</option>
59             <option value="M"></option>
60             <option value="F"></option>
61          </select></td>
62       </tr>
63        <tr>
64         <td>邮 箱:</td>
65         <td><input type="text" id="email" onfocus="textFocus(this)" onblur="textblur(this)"/></td>
66       </tr>
67         </tr>
68        <tr>
69         <td align="right"></td>
70         <td align="center"><input type="submit" value="提 交"/><input type="reset" value="重 置"/></td>
71       </tr>
72     </table>
73     </div>
74 </form>
75 </body>
76 </html>
表单事件示例
常用内置函数
isNaN() 检查某个值是否是数字
parseFloat() 解析字符串并返回一个浮点数
ecodeURI 将字符串编码为URI
decodeURI 解码某编码的URI
unecape() 对escap()编码的字符串进行解码
escap() 对字符串进行编码
parseInt() 解析字符串并返回整数
eval() 将字符串当做表达式执行

推荐阅读