（八）事件

顺毛黑起

于 2020-12-28 16:52:21 发布

阅读量118

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Apikaqiu/article/details/111831782

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

事件监听机制

概念：某些组件被执行了某些操作以后，触发了某些代码的执行。

事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮文本输入框…
监听器：代码
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件

1.单击事件：

  	1.onclick：单击事件
  	2.ondblclick：双击事件

2.焦点事件

  	1.onblur：失去焦点		一般用于表单验证
  	2.onfocus：元素获得焦点

3 加载事件：

  1.onload：一张页面或者一幅图像完成加载

4 鼠标事件：

  1.onmousedown	鼠标按钮被按下
  		定义方法时，定义一个形参，接收event对象
  		event对象的button属性可以获取鼠标的哪个按钮键被点击了
  2.onmousemove	鼠标被移动
  3.onmouseout	鼠标从某元素移开
  4.onmouseover	鼠标移到某元素之上
  5.onmouseup	鼠标按键被松开

5 键盘事件：

  1.onkeydown	某个键盘按键被按下

  2.onkeyup		某个键盘按键被松开

  3.onkeypress	某个键盘按键被按下并松开

6 选择和改变：
```
  1.onchange 域的内容被改变
```
```
  2.onselect	文本被选中
```
7 表单事件：

  1.onsubmit	确认按钮被点击
  		可以阻止表单的提交：
  			方法返回false则表单被阻止提交

```
  2.onreset		重置按钮被点击
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>


        //2.加载完成事件 onload
        window.onload=function () {
            //1.失去焦点事件
            // document.getElementById("username").οnblur=function () {
            //     alert("失去焦点了......");
            // }
            //3.绑定鼠标移动到元素之上事件
            // document.getElementById("username").οnmοuseοver=function () {
            //     alert("鼠标来了......");
            // }
            //4.绑定鼠标点击事件
           /* document.getElementById("username").οnmοusedοwn=function (event) {
                //alert("鼠标点击了......");
                alert(event.button);

            }*/

            document.getElementById("username").onkeydown=function (event) {
                //alert("鼠标点击了......");
                //alert(event.button);
                if (event.keyCode==13){
                    alert("提交表单");
                }
            }

            // onchange 域的内容被改变
           /* document.getElementById("username").οnchange=function (event) {
                alert("改变了......")
            }
        }

            */

        /*document.getElementById("city").οnchange=function (event) {
            alert("改变了......")
        }
        }

         */

        /*
        document.getElementById("form").οnsubmit=function () {
            //校验用户名格式是否正确
            var flag=flag;
            return flag
        }

         */
        function checkForm() {
            return false;
        }

        }
    </script>
</head>
<body>

<!--
    function fun(){
        return checkForm();
    }
-->
<form action="#" id="form" onclick="return checkForm();">
<input name="username" id="username">
<select id="city">
    <option>--请选择--</option>
    <option>北京</option>
    <option>上海</option>
    <option>西安</option>
</select>
    <input type="submit" value="提交">
</form>
</body>
</html>

案例-表格全选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例_表格全选</title>
    <style>
        table{
            border: 1px solid;
            margin-left: 30%;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .out{
            background-color: white;
        }
        .over{
            background-color: cyan;
        }
    </style>
    <script>
        /*
            分析：
                1.全选：
                    获取所有的checkbox
                    遍历checkbox,设置每一个checkbox的状态为选中
         */
        //1.在页面加载后绑定事件
        window.onload=function () {
            //2.给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick=function ( ) {
                //全选
                //获取所有的checkbox
               var cbs= document.getElementsByName("cb");
                //遍历checkbox
                for (var i = 0; i <cbs.length ; i++) {
                    //设置每一个checkbox的状态为选中
                    cbs[i].checked=true;
                }
            }

            document.getElementById("unSelectAll").onclick=function ( ) {
                //全不选
                //获取所有的checkbox
                var cbs= document.getElementsByName("cb");
                //遍历checkbox
                for (var i = 0; i <cbs.length ; i++) {
                    //设置每一个checkbox的状态为没有选中
                    cbs[i].checked=false;
                }
            }

            document.getElementById("selectRev").onclick=function ( ) {
                //反选
                //获取所有的checkbox
                var cbs= document.getElementsByName("cb");
                //遍历checkbox
                for (var i = 0; i <cbs.length ; i++) {
                    //设置每一个checkbox的状态为相反
                    cbs[i].checked=!cbs[i].checked;
                }
            }

            document.getElementById("firstCb").onclick=function ( ) {
                //第一个cb点击
                //获取所有的checkbox
                var cbs= document.getElementsByName("cb");
                //遍历checkbox
                for (var i = 0; i <cbs.length ; i++) {
                    //设置每一个checkbox的状态和第一个cb状态相同
                    cbs[i].checked=this.checked;
                }
            }
            //给所有tr绑定鼠标移到元素之上和移出元素之上事件
            var trs=document.getElementsByTagName("tr");
            //遍历
            for (var i = 0; i <trs.length ; i++) {
                //鼠标移到元素之上
                trs[i].onmouseover=function () {
                    this.className="over";
                }

                //鼠标移出元素之上
                trs[i].onmouseout=function () {
                    this.className="out";
                }
            }

        }
    </script>
</head>
<body>


<table>
    <caption>学生信息表</caption>
    <tr>
        <td><input type="checkbox" name="cb" id="firstCb"></td>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>朱一龙</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>白宇</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>鹿晗</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>

</body>
</html>

案例：表单校验

在这里插入图片描述分析：
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果
如果都为true,则监听器方法返回true
如果有一个为false，则监听器方法返回false
2.定义一些方法分别校验各个表单项
3.给各个表单项绑定onblur事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("6.jpg")  no-repeat center;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background: white;
            /*让div水平居中*/
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            /*border: 1px solid cadetblue;*/
            float: left;
            margin: 15px;
        }
        .rg_left>p:first-child{
            color: #FFD026;
            font-size: 20px;
        }
        .rg_left>p:last-child{
            color: #A6A6A6;
            font-size: 20px;
        }
        /*.rg_center{*/
        /*    border: 1px solid cadetblue;*/
        /*    float: left;*/
        /*    width: 450px;*/
        /*}*/
        .rg_right{
            /*border: 1px solid cadetblue;*/
            float: right;
            margin: 15px;
        }
        .rg_right>p:first-child{

            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            /*设置边框为圆角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 110px;
        }
        #img_check{
            height: 32px;
            vertical-align: middle;
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background: aqua;
            border: 1px solid aqua;
        }

        .error{
            color: red;
        }

        #td_sub{
            padding-left: 150px;
        }
    </style>

    <script>
 
        window.onload=function () {
            //给表单绑定onsubmit事件
            document.getElementById("form").onsubmit=function () {
                //调用用户校验方法  checkUsername()
                //调用密码校验方法  checkPassword()
                //return checkUsername()&&checkPassword();
                return checkUsername()&&checkPassword();

            }

            //给用户名和密码框分别绑定离焦事件
            document.getElementById("username").onblur=checkUsername;//绑定的是函数对象而不是函数
            document.getElementById("password").onblur=checkPassword;
        }

        //校验用户名
        function checkUsername() {
            //1.获取用户名的值
            var username=document.getElementById("username").value;
            //2.定义正则表达式
            var reg_username=/^\w{6,12}$/;
            //3.判断值是否符合正则表达式的规则
            var flag=reg_username.test(username);
            //4提示信息
            var s_username=document.getElementById("s_username");
            if (flag){
                //提示绿色对勾
                s_username.innerHTML="<img width='35' height='25'   src='duigou.png'/>";
            }else {
                //提示红色用户名有误
                s_username.innerHTML="用户名格式有误";
            }
            return flag;
        }

        //校验密码
        function checkPassword() {
            //1.获取用户名的值
            var password=document.getElementById("password").value;
            //2.定义正则表达式
            var reg_password=/^\w{6,12}$/;
            //3.判断值是否符合正则表达式的规则
            var flag=reg_password.test(password);
            //4提示信息
            var s_password=document.getElementById("s_password");
            if (flag){
                //提示绿色对勾
                s_password.innerHTML="<img width='35' height='25' src='duigou.png'/>";
            }else {
                //提示红色用户名有误
                s_password.innerHTML="密码格式有误";
            }
            return flag;
        }
    </script>
</head>
<body>
    <div class="rg_layout">
        <div class="rg_left">
            <p>新用户注册</p>
            <p>USER REGISTER</p>

        </div>
        <div class="rg_center">
            <div class="rg_form">
                <!--定义表单-->
                <form   action="#" id="form" method="get">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用户名</label></td>
                            <td class="td_right">
                                <input type="text" name="username" id="username" placeholder="请输入账号">
                                <span id="s_username" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="password">密码</label></td>
                            <td class="td_right">
                                <input type="password" name="password" id="password" placeholder="请输入密码">
                                <span id="s_password" class="error"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right">
                                <input type="text" name="email" id="email" placeholder="请输入Email">

                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="tel">手机号</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入您的手机号"></td>
                        </tr>
                        <tr>
                            <td class="td_left">性别</td>
                            <td class="td_right">
                                <input type="radio" name="gender" value="male" checked >男
                                <input type="radio" name="name" value="female">女
                            </td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                        </tr>
                        <tr>
                            <td class="td_left"><label for="checkcode">验证码</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                <img id="img_check" src="5.jpg">
                            </td>

                        </tr>
                        <tr>
                            <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
                        </tr>
                    </table>
                </form>
            </div>

        </div>
        <div class="rg_right">
            <p>已有账号？<a href="#">立即登录</a></p>

        </div>
    </div>
</body>
</html>

顺毛黑起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（八）事件

事件监听机制概念：某些组件被执行了某些操作以后，触发了某些代码的执行。事件：某些操作，如：单击，双击，键盘按下了，鼠标移动了事件源：组件。如：按钮文本输入框…监听器：代码注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。常见的事件1.单击事件： 1.onclick：单击事件 2.ondblclick：双击事件 2.焦点事件 1.onblur：失去焦点一般用于表单验证 2.onfocus：元素获得焦点
复制链接

扫一扫

专栏目录