js：事件（onclick、onsubmit、onload、onselect、onblur等）

转载

mb5ff40afd04638 2020-01-23 10:43:00

文章标签 html 用户名失去焦点赋值用户交互 文章分类 JavaScript 前端开发

1、事件

（1）概念

事件是指浏览器或文档与用户交互的过程中发生的一些特定的动作，事件发生后调用相对应的函数。

（2）事件的组成

事件源：事件被触发的对象，如：按钮

事件类型：事件是怎么触发的，如：点击

事件处理程序：通过一个函数赋值的方式

2、鼠标单击事件：onclick

<!DOCTYPE html>
<html>
    <head> 
            <meta charset="utf-8"> 
            <title>事件</title> 
    </head>
    <body>
            <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
            <p id="demo"></p>
    </body>
</html>

js：事件（onclick、onsubmit、onload、onselect、onblur等）_html

单击鼠标后显示时间。

js：事件（onclick、onsubmit、onload、onselect、onblur等）_用户名_02

3、表单提交事件：onsubmit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script>
            function showTips(id,info){
                document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
            }
            
            function check(id,info){
                var uValue = document.getElementById(id).value;
                if(uValue==""){
                    document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
                }else{
                    document.getElementById(id+"span").innerHTML="";
                }
            }
        </script>
    </head>
    <body>
        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
            <tr>
                <td height="600px" ">
                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
                        <table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
                            <tr>
                                <td>
                                    用户名
                                </td>
                                <td>
                                    <input type="text" name="user" size="34px" id="user" 
                                        onfocus="showTips('user','用户名必填！')" 
                                        onblur="check('user','用户名不能为空！')"/>
                                        <span id="userspan"></span>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    密码
                                </td>
                                <td>
                                    <input type="password" name="password" size="34px" id="password"  
                                        onfocus="showTips('password','密码必填')"
                                        onblur="check('password','密码不能为空!')"/>
                                        <span id="passwordspan"></span>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    确认密码
                                </td>
                                <td>
                                    <input type="password" name="repassword" size="34px" id="repassword"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    Email
                                </td>
                                <td>
                                    <input type="text" name="email" size="34px" id="email"/>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    姓名
                                </td>
                                <td>
                                    <input type="text" name="username" size="34px" id="username"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    性别
                                </td>
                                <td>
                                    <input type="radio" name="sex" value="男"/>男
                                    <input type="radio" name="sex" value="女"/>女
                                </td>
                            </tr>
                            
                            <tr>
                                <td>
                                    出生日期
                                </td>
                                <td>
                                    <input type="text" name="birthday" size="34px" id="birthday"></input>
                                </td>
                            </tr>
                            
                            <tr>
                                <td colspan="2">
                                    <center>
                                    <input type="submit" value="注册" />
                                    </center>
                                </td>
                            </tr>
                        </table>
                    </form>
                </td>                
            </tr>
        </table>
    </body>
</html>

4、页面载入事件：onload

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <script>
            function init(){
                setInterval("changeImg()",3000);
            }
            var i=0
            function changeImg(){
                i++;
                document.getElementById("img").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body onload="init()">
        
            <div id="">
                <img src="../img/1.jpg" width="100%" id="img"/>
            </div>
    
    </body>
</html>

5、选中文本事件：onselect

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>select事件</title>
    </head>
    <body>
        <textarea cols="50" rows="10" onselect="alert('select事件被触发了')">
              据国家卫健委消息，新型冠状病毒感染的肺炎被纳入法定传染病乙类管理，
            采取甲类传染病的预防、控制措施。我国《传染病防治法》将传染病分甲类、
            乙类、丙类三类，卫健委发布的信息意味着：对新型肺炎的感染者、疑似病人
            等，各级政府、卫健部门、其他政府部门、医疗卫生机构，都可以依法采取防
            控措施，比如隔离医学观察、隔离治疗。
        </textarea>
    </body>
</html>

js：事件（onclick、onsubmit、onload、onselect、onblur等）_赋值_03

6、失去焦点事件onblur

<body>
        <input type="password" id="inp"/>
        <span id="maeessge"></span>
        <script>
                var ipt=document.getElementById("inp");
                var message=document.getElementById("maeessge");
            inp.onblur=function(){
                if(this.value.length<6||this.value.length>16){
                 message.innerText="密码长度不符合要求";                    
                }else{
                    message.innerText="ok";
                }
            }
        </script>
    </body>