[JavaScript]事件

最新推荐文章于 2024-04-18 23:22:15 发布

意Ω外

最新推荐文章于 2024-04-18 23:22:15 发布

阅读量635

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zailalaniubi/article/details/126840914

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件 --------可以在触发浏览器的行为

1.窗口事件(失去焦点事件以及获得焦点事件)：

/*  当窗口失去焦点时 */
     window.onblur = function () {
         console.log('窗口失去了焦点！');
     }
    /*  当窗口获得焦点时 */
     window.onfocus = function () {
         console.log('窗口获得了焦点！');
     }
    /* 窗口加载完成后*/
     window.onload =function () {
         console.log("窗口加载完成！")
     }
    /*  窗口大小改变时 事件 */
     window.onresize = function () {
         console.log("窗口大小正在发送改变");
     }

窗口获得焦点

鼠标在窗口内

窗口失去焦点

鼠标在窗口外

窗口加载成功

一打开页面显示

窗口大小改变

可以看到我缩小了页面

var userCode = document.getElementById("userCode");

    /*  获得焦点时 改变背景色 */
    userCode.onfocus = function () {
        this.style.backgroundColor = 'green';
    }
    /*  失去焦点时 改变背景色 */
    userCode.onblur = function () {
        this.style.backgroundColor = 'red';
    }

获得焦点焦点变绿色

失去焦点变红色

2.表单提交事件

    var myForm = document.getElementById("myForm");

    /* 为表单绑定提交事件 */
    myForm.onsubmit = function () {
        let userCode = document.getElementById("userCode").value;
        let userPwd = document.getElementById("userPwd").value;
        var reg = /^[A-Za-z0-9]{6,12}$/;
        console.log("触发了表单的提交事件！");
        if (userCode == '') {
            alert("账号不能为空");
        } else if (userCode.length < 6 || userCode.length > 12) {
            alert("账号长度错误");
        } else if (!reg.test(userCode)) {
            alert("账号只能为字母与数字!");
        } else if (userPwd == '') {
            alert("密码不能为空");
        } else if (userPwd.length < 6 || userPwd.length > 12) {
            alert("密码长度错误");
        } else if (!reg.test(userPwd)) {
            alert("密码只能为字母与数字!");
        } else {
            return true;
        }
        // return true:可以提交  false 不能提交
        return false;
    }

3.键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .divStyle {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box" class="divStyle">

</div>

<script>
       /!*  键盘按下事件 *!/
       window.onkeydown = function (event) {
           /!* 解决兼容问题 *!/
           event = event || window.event;
           console.log("键盘按下了" + event.keyCode);
           if (event.keyCode == 13) {
               console.log('按下了回车');
           }
       }

    /* onkeyup： 当松开按键时 触发 */
    window.onkeyup = function (event) {

        event = event || window.event;

        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    }

    /* 键盘 按下并松开时*/
     window.onkeypress = function (event) {
         event = event || window.event;
         console.log("键盘按下了" + event.keyCode);
         if (event.keyCode == 13) {
          console.log('按下了回车');
        }
     }

    var box = document.getElementById("box");
    document.onkeydown = function (event) {
        event  = event ||window.event;

        switch (event.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - 10+'px';
                break;
            case 39:
                box.style.left = box.offsetLeft + 10+'px';
                break;
            case 38:
                box.style.top = box.offsetTop - 10+'px';
                break;
            case 40:
                box.style.top = box.offsetTop + 10+'px';
                break;
        }
    }
</script>

</body>
</html>

键盘摁下时

键盘松开时

4.鼠标事件（单机，双击，按钮摁下，按钮运行时）

 window.onclick = function () {
        console.log("鼠标单击事件");
    }

    window.ondblclick = function () {
        console.log("鼠标双击事件");
    }

    window.onmousedown = function () {
        console.log("当鼠标按钮按下运行时");
    }

    window.onmouseup = function () {
        console.log("当鼠标按钮运行时");
    }

4.2鼠标移入移出事件以及鼠标滚轮运行事件

    /* onmouseover 当鼠标移入时  不能阻止冒泡  */
    function divMouseover() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseout : 当鼠标移出时  不能阻止冒泡*/
    function divMouseout() {
        console.log("当鼠标移出了当前的DIV");
    }
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
    /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }