0028 JS 的事件 二

目录

1、鼠标事件 onmouse

鼠标的onmouse事件，js的的方法，绑定了光标来进行触发事件，改变标签的样式，达到显示的效果。
案例1 鼠标进出变颜色

image-20230315170423204

案例2 菜单的栏 内容隐藏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .container {
            width: 100px;
            height: 200px;
            /*border: 1px solid red;*/
            /*background-color: #bea5a5;*/
        }
        .title {
            width: 80px;
            height: 25px;
            background-color: #34a275;
        }
        .title div{
            margin-top: 10px;
            background-color: #bea5a5;

        }
        .hide {
            display: none;
        }

    </style>
    <script>
        window.onload = function () {
            var title_doc  = document.querySelector('.title')
            var list_doc  = document.querySelector('.list')
            var container_doc  = document.querySelector('.container')

            title_doc.onmouseover = function () {
                list_doc.classList.remove('hide')
                // 进入到视频专栏的标签内 显示子菜单
            }
            container_doc.onmouseleave = function () {
                list_doc.classList.add('hide')
                // 只有完全脱离 整个菜单栏的区域，才继续隐藏
            }
        }
    </script>
</head>
<body>
<div class="container">

    <div class="title">视频专栏
        <div class="list hide">
            <div class="item1">电影</div>
            <div class="item1">动漫</div>
            <div class="item1">综艺</div>
            <div class="item1">午夜影院</div>
        </div>
    </div>
</div>
</body>
</html>

image-20230315172641605

2、键盘 事件

键盘的onkey事件，js的方法，onkey获取到输入的键盘的状态和内容，键盘的状态有两种按下，松开，内容是数据的编码和实际显示的内容，场景登录页面，输入完密码后，获取到enter后，触发提交按钮。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>

    <script>
        // 默认form表单有自动触发 提交事件
        // onkeyup 更多还是应用于 对于
        window.onload = function () {

            var ele = document.querySelector('.c1')
            ele.onkeydown = function () {
                // 键盘上的键按下 ，没有松开 触发的事件
                // console.log('ok')

            }

            ele.onkeyup = function (e) {
                //  键盘上的键 按下然后松开 触发的事件
                // console.log('ok')
                console.log(e.keyCode)
                // 打印的是输入字符的数字 编码
                
                console.log(e.key)
                // 打印具体的键盘的按键
            }

            ele.onkeypress = function () {
                //  键盘上的键 按下然后松开 触发的事件
                // console.log('ok')

            }
        }
    </script>

</head>
<body>

<span>用户:</span><input type="text" name=""  class="c2">
<div></div>
<span>密码:</span><input type="text" name=""  class="c1">
<div></div>



<!--<form action="http://baidu.com/action">-->
<!--<span>用户:</span><input type="text" name="" id="" class="c2">-->
<!--<div></div>-->
<!--<span>密码:</span><input type="text" name="" id="" class="c1">-->
<!--<div></div>-->
<!--    <input type="submit">-->
<!--</form>-->


</body>
</html>
案例 回车保存
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>

    <script>
        window.onload =function () {
            var ele = document.querySelector('.c1 input')
            ele.onkeyup = function (e) {
                // console.log(e.keyCode)
                if ( e.keyCode === 13){
                    // 触发提交事件 button 保存
                    console.log('保存')
                }
            }
        }

    </script>

</head>
<body>

<div >

    <div><span>ID：</span><input type="text"></div>
    <div><span>用户名：</span><input type="text"></div>
    <div class="c1"><span>密码：</span><input type="text"></div>
    <button>保存</button>

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

image-20230316121827643

3、焦点事件

获取焦点 onblur和onfocus ，一般在input标签中使用，

在注册过程中键入用户名，输入完用户名后，离开input标签后，叫做失去焦点，触发请求用户名是否重复。

image-20230316122615739

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function () {

            var ele =  document.querySelector('.c1')
            ele.onfocus = function () {

                // 获取焦点，点击进入输入框 就能触发事件
                console.log('ok')

            }
            ele.onblur = function () {

                // 失去焦点，点击输入框之外的区域 就能触发事件
                console.log('NO')

            //  一般使用使用在 提前校验 用户名是否符合规则使用 js 进行提前判断
            }
        }
    </script>
</head>
<body>
<span>用户名:</span> <input type="text" class="c1">

</body>
</html>

4、冒泡事件

冒泡事件 ,盒子模型嵌套时，两个模型分别绑定的触发事件，范围小的盒子模型在被触发时，大盒子的事件也会被触发，理解 子标签将继承父标签的触发事件，子标签通过event.stopPropagation阻止父标签的事件触发，。
和onsubmit提交事件的效果差不多，一个阻止当前标签的默认动作，一个是阻止继承父级标签的触发事件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .c1 {
            height: 200px;
            width: 200px;
            background-color: #34a275;

        }


        .c2 {
            height: 100px;
            width: 100px;
            background-color: #bea5a5;
        }
    </style>

    <script>

        window.onload =function () {
            var ele1 = document.querySelector('.c1')
            var ele2 = document.querySelector('.c2')

            ele1.onclick = function () {
                alert('111')
            }


            // c2 区域在c1 区域内，默认继承 c1 的事件
            // 点击c2 的区域的话，触发c2的事件，不想触发c1的事件怎么做
            ele2.onclick = function (e) {

                e.stopPropagation()
                // 阻止继承父级标签的触发事件。
                alert('222')
            }

        }

    </script>

</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
</body>
</html>

image-20230316141355178

posted @ 2023-03-15 17:33  mmszxc  阅读(29)  评论(0)    收藏  举报