JavaScript 事件详解

最新推荐文章于 2024-08-21 23:10:49 发布

不到三十岁就已经成为魔法师

最新推荐文章于 2024-08-21 23:10:49 发布

阅读量646

点赞数 4

分类专栏：去罗马的曲曲折折之路文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_57519357/article/details/126770037

版权

去罗马的曲曲折折之路专栏收录该内容

25 篇文章 0 订阅

订阅专栏

基本概念

1.什么是事件

JS是可以监视到一些事件的发生，我们可以编写事件，当用户使用鼠标或者键盘时，可以执行对应事件的代码。

2.事件的类型

鼠标事件：用户操作鼠标触发的事件

键盘事件：用户操作键盘触发的事件

浏览器事件：浏览器的变化触发的事件

表单事件：表单提交等操作触发的事件。

事件的具体方法

键盘事件

键盘按下事件:

window.onkeydown = function (event) { event = event || window.event; //解决兼容问题

执行语句}

键盘松开按键事件:

window. onkeyup = function (event) { event = event || window.event; //解决兼容问题

执行语句}

键盘按下并松开按键事件

window. onkeypress = function (event) { event = event || window.event; //解决兼容问题

执行语句}

这里我举一个例子：控制一个div块在浏览器根据上下左右键移动

<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>
</body>

<script>
    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>

这个代码的执行效果如图

我们可以通过键盘控制红色方块的上下左右移动。

鼠标事件

相对于键盘事件，鼠标事件的操作会更加灵活，也是用户与程序进行交互操作时经常使用的手段，以下是鼠标事件的常用方法：

window.onclick = function () { 执行语句 } //鼠标单击事件

window.οndblclick= function () { 执行语句 }//鼠标双击事件

window.onmousedown = function () { 执行语句 }//当鼠标按钮按下运行时

window.onmouseup = function () { 执行语句 }//当鼠标按钮运行时

window.onmouseover = function () { 执行语句 }//当鼠标移入时不能阻止冒泡

window.onmouseout = function () { 执行语句 }//当鼠标移出时不能阻止冒泡

window.onmouseenter = function () { 执行语句 }//当鼠标移出时可以阻止事件冒泡

window.onmouseleave = function () { 执行语句 }//当鼠标移出时可以阻止事件冒泡

window.onmousewheel = function () { 执行语句 }//当鼠标的滚轮运行

例子：简单地触发一些鼠标事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseenter="divMouseenter()"
         onmouseleave="divMouseleave()"
         style="width: 100px;height: 100px;background: pink">
    </div>
</div>

<div id="box" style="overflow: scroll;width: 200px;height: 200px;">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

<script>
    /* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
    /* onmouseleave ： 可以阻止事件冒泡 */
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
    /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }

</script>


</body>

效果如图：

当鼠标移动滑轮时，会触发滚轮事件，当鼠标从div中移入和移出时，也会触发事件。值得注意地是，当我们不经过红色块，而是先进入粉色块是，鼠标移入事件触发了两次，说明div的鼠标事件是有击穿效果的，因此我们需要注意，在Vue中，我们可以控制这类现象，达到我们想要的效果。

浏览器事件

一般浏览器事件并不会经常使用，但是一些常用的方法我们需要知道

window. onblur = function(){ 事件执行的语句} //当窗口失去焦点时

window. onfocus = function(){ 事件执行的语句}//当窗口获得焦点时

window. onload = function(){ 事件执行的语句}//窗口加载完成后

window. onresize = function(){ 事件执行的语句}//窗口大小改变

window. onchange = function(){ 事件执行的语句}//内容改变事件

window. oninput = function(){ 事件执行的语句}//当文本框内容改变时，立即将改变内容

window. oninvalid = function(){ 事件执行的语句}//获取表单未能提交时

window. onselect = function(){ 事件执行的语句}//当文本框内容被选中时

表单提交事件

对比其它事件，表单提交事件的方法会比较少，但是每一个都需要掌握。后端需要的数据大部分都需要前端以表单的形式传递，因为表单可以一次传递大量且复杂的数据结构。

表单对象.onsubmit = function(){ 事件执行的语句} //表单绑定提交事件

表单对象.onclick = function(){ 事件执行的语句} //表单绑定单击事件

例子：表单传递一个用户的注册信息

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

<form action="5.数组.html" method="get" id="myForm">
    <label>账号：</label> <input type="text" id="userCode" value="这是默认值"/> <br/><br/>
    <label>密码：</label> <input type="password" id="userPwd"/> <br/><br/>
    <input type="submit"/>
    <input type="reset" />
</form>

<script>


    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;
    }

    let butA = document.getElementById("butA");
    // onclick 单击事件
    butA.onclick = function () {
        document.getElementById("userCode").value = '';
        document.getElementById("userPwd").value = '';
    }
</script>
</body>
</html>

效果图之一：