zoukankan      html  css  js  c++  java
  • 关于JavaScript事件与函数

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

    <!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() 将字符串当做表达式执行
    准备太多 不如行在路上 如有指教及代码错误请消息或邮件397599682@qq.com,欢迎讨论
  • 相关阅读:
    (critical) chassis-frontend.c:122: Failed to get log directory, please set by --log-path
    Zabbix MySQL percona 模板部署
    shell编程
    pt-online-schema-change
    Haproxy + Keepalived +PXC 常见错误
    c/c++获取系统时间函数
    《C++ Concurrency in Action》
    C++多线程学习资料参考
    C++11多线程教学
    软件学习网站
  • 原文地址:https://www.cnblogs.com/degui/p/9011487.html
Copyright © 2011-2022 走看看