当前位置：首页 > article >正文

DOM事件监听（鼠标事件，键盘事件，表单事件）

article 2024/11/14 7:40:14

事件监听概述

鼠标事件

mousedown

mouseup

click

dblclick

mouseenter

mouseleave

wheel

键盘事件

keydown

keyup

表单事件

提交事件

重置事件

选中事件

事件监听概述

事件监听与处理，用于在程序运行过程中实时监测和响应特定的事件。

事件是发生在程序中的某种特定行为或状态变化，比如用户点击按钮、键盘输入，点击鼠标等

事件监听就是程序通过注册特定的事件处理器，实时监听系统中可能发生的事件，比如当用户想进行页面更新，而做出的特定行为，这一行为就会被监听。

事件处理器，用于响应特定事件发生时的操作。当监听到特定事件发生时，系统会调用相应的事件处理器来处理该事件。事件处理器可以做一些特定的操作，比如更新界面、发送请求、保存数据等

鼠标事件

鼠标事件是指与鼠标交互时发生的动作或行为。常见的鼠标事件包括鼠标移动、鼠标点击、鼠标滚轮滚动等。这些事件可以被程序捕捉并做出相应的响应。例如，当鼠标点击一个按钮时，可以触发按钮的点击事件执行相应的操作。

关于鼠标事件的常用函数
mousedown	按下鼠标键时触发
mouseup	抬起鼠标键时触发
click	单击鼠标时触发
dblclick	在同一个元素上双击鼠标时触发
mouseenter	鼠标进入一个节点时触发，进入子节点不会触发这个事件
mouseleave	鼠标离开一个节点时触发，离开父节点不会触发这个事件
wheel	在浏览器窗口滚动鼠标滚轮时触发

进行事件监听首先要获取监听元素的节点，其次再对节点进行事件监听，设置函数用于处理特定的鼠标事件。

mousedown

                            鼠标按下监听  示例：

<style>
.test{                     //给盒子设置样式
            width: 100px;
            height: 40px;
            background-color: skyblue;
            border-radius: 30px;
            border: 2px black solid;
            text-align: center;
            font-size: 20px;
        }
       
</style>
<body>

    <div class="test" id="div1">鼠标事件</div>          

    <script>
       one=document.getElementById("div1");        //获取要监听的节点
 
        one.addEventListener("mousedown",          //对获取的节点进行监听

            function(){                             //设置函数用于处理特定的鼠标事件

                console.log("鼠标事件已触发")//此代码为清楚鼠标事件监听过程而设置，可去掉。
            }
        );
     </script>


</body>

鼠标按下六次看看鼠标监听的效果：

mouseup

one.addEventListener("mouseup",
            function(){
                console.log("鼠标抬起事件已触发")
            }
        );

click

one.addEventListener("click",
            function(){
                console.log("鼠标单击事件已触发")
            }
        );

dblclick

one.addEventListener("dblclick",
            function(){
                console.log("鼠标双击事件已触发")
            }
        );

mouseenter

one.addEventListener("mouseenter",
            function(){
                console.log("鼠标进入节点事件已触发")
            }
        );

mouseleave

one.addEventListener("mouseleave",
            function(){
                console.log("鼠标离开节点事件已触发")
            }
        );

wheel

one.addEventListener("wheel",
            function(){
                console.log("鼠标滚轮事件已触发")
            }
        );

以上即为鼠标事件常用的几个标签

键盘事件

键盘事件可以用于检测用户的键盘输入，并根据输入进行相应的操作或响应。例如，在游戏中可以使用键盘事件来控制角色的移动或触发特定的动作。

键盘监听事件常见属性
keydown	按下键盘时触发
keyup	抬起键盘时触发
event.key	拿到键盘的值

keydown

                     键盘监听 示例
<script>
       //监听整个文档的keydown事件
        document.addEventListener(
            `keydown`,
            function(event){
        // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等） 
                keyCode=event.key;
        //输出键盘监听效果（可去掉）
                console.log(`键盘 ${keyCode}  被按下`)    

            }
        )

    </script>

键盘输入over 看看键盘监听的效果：

keyup

                    
<script>
      
        document.addEventListener(
            `keyup`,
            function(event){
                keyCode=event.key;
                console.log(`键盘 ${keyCode} 抬起`)    

            }
        )

    </script>

表单事件

表单事件是指在用户对HTML表单进行操作时触发的一系列事件，例如：提交表单，重置表单...

submit	提交事件
reset	重置事件
select	选中事件

提交事件

尝试设置对表单进行阻止表单提交：

        一个简单的表单
<form id="myForm">  
        姓名: <input type="text" id="name" value="输入你的姓名">  <br>  
        邮箱: <input type="email" id="email" value="输入你的邮箱">  <br>  
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>  
    <script>
        //获取表单节点
        test=document.getElementById("myForm")

        // 添加表单提交事件监听器 
        test.addEventListener(`submit`,
            function(event){

                //阻止表单的“默认提交行为”
                event.preventDefault();

                //用于提示用户表单提交行为被驳回(可去掉)
                alert("表单提交按钮被按下! (但默认提交行为被截止了)")

            }
        );
 </script>

提交表单被驳回

preventDefault：

阻止表单的 “默认提交行为” （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））

在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证，比如：提交表单之前检查用户输入的数据是否有效（填字段是否已填写，电子邮件地址格式是否正确等），这时就需要阻止表单的默认提交行为。

那么如何在提交表单之前检查用户输出数据是否有效呢？

可以通过获取用户的输入值然后在后台进行确认，那么来尝试一下获取输入值吧


    <script>
        test=document.getElementById("myForm")
        test.addEventListener(`submit`,
            function(event){
                event.preventDefault();
                alert("表单提交按钮被按下! (但默认提交行为被截止了)")



                            //获取输入值：  
            const name = document.getElementById('name').value;  
            const email = document.getElementById('email').value;  
                            //在后台打印出用户输入值
            console.log('Name:', name);  
            console.log('Email:', email);  

            }
        );
 </script>

在后台获取用户输入值

重置事件

添加表单重置事件监听器

// 添加表单重置事件监听器  
         test.addEventListener('reset', 
            function(event) {  
            // 弹出重置警告框，告知用户表单已重置
            alert('表单已经重置! ');  
            }
        );

选中事件

Event.target                  返回事件当前所在的节点

selectionStart                 返回的是选择范围的起始位置的字符的索引

selectionEnd                 返回的是选择范围的结束位置的下一个字符的索引

substring                用于从字符串中提取特定部分并返回新的子字符串的一种常用方法。

substring 示例：

var a = "abcdefghijklmn";
var b = str.substring(2, 6);
console.log(b); // 输出: "cdef"

提示用户选中了输入框内的文本

        // 获取文本输入框元素  
        const inputElement = document.getElementById('name'); 
        // 添加 select 事件监听器  
        inputElement.addEventListener('select', 
            function(event) {  
            alert('输入框中的文本被选中了！！！');  
            }
    );

获取用户选中的文本及文本范围：

        // 获取文本输入框元素  
        const inputElement = document.getElementById('name'); 
        // 添加 select 事件监听器  
        inputElement.addEventListener('select', 
            function(event) {  

            // 输出选择的文本范围（起始位置和结束位置） 
            

            console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);  
  
            
             // 输出选择的文本（起始位置和结束位置） 
            
            const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);  
            console.log('已选中文本:', selectedText);  
  
            }
    );

获取用户选中的文本范围及文本