JavaScript 的文档事件

最新推荐文章于 2024-06-28 14:33:15 发布

Y_xuID

最新推荐文章于 2024-06-28 14:33:15 发布

阅读量343

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Y_xuID/article/details/126770516

版权

一、什么是文档事件

事件就是网页文档或网页元素对外发出的通知。当HTML元素与用户发生交互行为时，该元素会触发相关的交互事件。HTML文档或元素触发事件时，会对JS发出的通知，通知JS程序HTML文档或元素与用户发生了交互，或者内容发生了变化，JS可以处理这些事件。

二、具体事件

1、窗口事件：是指窗口所引发的事件

onblur	当窗口失去焦点时触发
onfocus	当窗口获得焦点时触发
onload	窗口加载完成后触发
onresize	窗口大小改变时触发

	/*  当窗口失去焦点时 */
     window.onblur = function () {
         console.log('窗口失去了焦点！');
     }

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

2、表单事件：在HTML表单中触发

onchange	内容改变事件
oninput	文本框内容改变时
oninvalid	获取表单未能提交时
onselec	当文本框内容被选中时
onsubmi	表单绑定提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    /* onchange 内容改变事件   */
    userCode.onchange = function () {
        console.log(userCode.value);
    }
    
    /* oninput 当文本框内容改变时  ，立即将改变内容 输出在控制台 */
     userCode.oninput = function () {
         console.log(userCode.value);
     }
    // 获取表单 未能提交时
     userCode.oninvalid = function () {
         console.log("请您完成表单的内容!");
     }
    /* 当文本框内容被选中时 */
     userCode.onselect = function () {
        
        console.log("您已经选择了文本框!");
     }

    var myForm = document.getElementById("表单id");

    /* 为表单绑定提交事件 */
    myForm.onsubmit = function () {
         return false;
    }    

</script>
</body>
</html>

3、键盘事件：用来描述键盘的行为

onkeydown	键盘按下事件
onkeyup	当松开按键时触发
onkeypress	键盘按下并松开时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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、鼠标事件：鼠标进行相关操作时会触发响应的事件

onclick	鼠标单击事件
ondblclick	鼠标双击事件
onmousedown	当鼠标按钮按下运行时触发
onmouseup	当鼠标按钮运行时触发
onmouseover	当鼠标移入时触发，不能阻止冒泡事件
onmouseout	当鼠标移出时触发，不能阻止冒泡事件
onmouseenter	可以阻止事件冒泡
onmouseleave	可以阻止事件冒泡
onscroll	当滚动元素的滚动条运行时触发
onmousewheel	当鼠标的滚轮运行时触发