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

原创于 2024-11-11 01:24:50 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

文章标签：

一、事件监听

事件监听是一种机制，用于在特定的事件发生时触发相应的函数或代码块。在 JavaScript 中，常见的事件包括点击事件、鼠标移动事件、键盘按键事件等。通过监听这些事件，我们可以在用户与页面进行交互时执行特定的操作，从而实现页面的动态效果和交互功能。

事件监听的三要素：

事件源：那个dom元素被事件触发了，要获取dom元素

事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等

事件调用的函数：要做什么事

常见的有鼠标监听事件，键盘监听事件，表单监听事件以及定时事件。

二、鼠标监听事件

JavaScript 中有多种鼠标事件，开发者可以根据不同的需求来捕获相应的操作。这些事件包括但不限于：

mousedown：按下鼠标键时触发

mouseup：抬起鼠标键时触发

click：单击鼠标时触发

dblclick：在同一个元素上双击鼠标时触发

mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件

mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件

wheel：在浏览器窗口滚动鼠标滚轮时触发

首先我们先看一下我们的事件对象代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标事件</title>
    <style>


        .box{
            width:  60px;
            height: 30px;
            background-color: aliceblue;
            border: 2px solid black;
            text-align: center;
        }

        body {  
            height: 3000px; /* 增加浏览器页面高度以便滚动 */  
        }
    </style>
</head>
<body>

    <div class="box" id="b1">事件</div>

  



</body>
</html>

显示如下：

接下来我们来做一个按下鼠标键触发的一个鼠标事件

我们需要先通过id获取它的节点，后创建一个函数，处理这个节点。（mousedown：按下鼠标键时触发）

代码如下：

 <script>


        // mousedown：按下鼠标键时触发 
     
        box = document.getElementById("b1");

        box.addEventListener( "mousedown",
            function(){
                console.log("鼠标按下事件已触发");
            }
        );
 </script>

通过打印可以监听到做了三次按下鼠标这一动作。

mouseup：抬起鼠标键时触发

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

可以监听到我们抬起鼠标7次

click：单击鼠标时触发

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

通过打印发现可以监听到我们点击了三次。（一次按下一次抬起相当于一次点击）

dblclick：在同一个元素上双击鼠标时触发

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

mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件

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

鼠标进入一次盒子即为进入节点一次（取得节点是div的id）

mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件

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

wheel：在浏览器窗口滚动鼠标滚轮时触发

  // 窗口监听鼠标滚动
        window.addEventListener( "wheel",
            function(){
                console.log("鼠标滚动事件已触发");
            }
        );

三、监听键盘事件

keydown：按下键盘时触发

keyup：抬起键盘时触发

基础骨架代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘事件</title>
    <style>
        #output {  
            margin-top: 20px;  
            padding: 10px;  
            border: 1px solid #ccc;  
            width: 300px;  
            height: 100px;  
            overflow-y: scroll;
            
            /* 保持空白符和换行符 */ 
            white-space: pre-wrap; 
        }  
    </style>  
</head>  
<body>  

    <div id="output"></div>  
  

</body>  
</html>

效果：按下如何键都没有反应，只有一个外壳

按照惯例，我们要干事情之前要先获取节点。（通过id选择器）

   // 获取显示按键信息的元素  
        const outputDiv = document.getElementById('output');

先来做一个按下键的一个事件

keydown：按下键盘时触发

 <script>  
        // 获取显示按键信息的元素  
        const outputDiv = document.getElementById('output');  
  
        // 监听整个文档的keydown事件  
        document.addEventListener(

            'keydown',

            function(event) {  

                // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）   
                const keyCode = event.key; 
                
                // 将按键信息添加到输出区域  
                const message = `键盘 ${keyCode}  被按下`; 
                outputDiv.textContent += message + '\n';  


            }
        );  


    </script>

在输出框可以看见我们按下了哪些键。

keyup：抬起键盘时触发

        document.addEventListener(

            'keyup',

            function(event) {  

                // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）   
                const keyCode = event.key; 
                
                // 将按键信息添加到输出区域  
                const message = `键盘 ${keyCode}  被按下`; 
                outputDiv.textContent += message + '\n';  
                console.log(`有键盘按键抬起: ${event.key}`);

通过打印可以看到：

四、监听表单事件

表单的基本骨架

<!DOCTYPE html>  
<html lang="zh">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>表单事件</title>  
</head>  
<body>  
    <!-- 简单的HTML表单 -->  
    <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>  
  
 
</body>  
</html>

常用的表单事件有：

submit：单击提交时触发

reset：单击重置时触发

select：选中文本时触发

同样的先获取节点再进行监听

submit：我们可以看到为表单的提交做了一个拦截（因为没有地方可以让他提交）

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

然而，在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证

在这些情况下，你需要阻止表单的默认提交行为。

 <script>  
        // 获取表单元素  
        const form = document.getElementById('myForm');  
  
        // 添加“表单提交”事件监听器  
        form.addEventListener('submit', 
            function(event) {  


            event.preventDefault();  
  
            // 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理）  
            alert('表单提交按钮被按下! (但默认提交行为被截止了)');  
  
            // 你可以在这里添加其他代码来处理表单数据  
            // 例如，获取输入值：  
            const name = document.getElementById('name').value;  
            const email = document.getElementById('email').value;  
            console.log('Name:', name);  
            console.log('Email:', email);  
            }
        );

比如：你可以在提交表单之前检查用户输入的数据是否有效（如检查必填字段是否已填写，

电子邮件地址格式是否正确等）。如果数据无效，你可以显示错误消息而不提交表单

reset：单击重置时触发

        form.addEventListener('reset', 
            function(event) {  
            // 弹出警告框
            alert('表单已经重置! ');  
            }
        );

select：选中文本时触发

        // 1.获取姓名输入框节点
        const inputElement = document.getElementById('name'); 
        // 2.为表单的姓名输入框添加 select 选中事件监听器  
        inputElement.addEventListener('select', 
            function(event) {  
  
            // 输出一条消息来表示事件已被触发  
            alert('输入框中的文本被选中了！！！');  
            }
    );

select：选中文本时触发可以输出选择的文本范围（起始位置以及结束位置）

        inputElement.addEventListener('select', 
            function(event) {  
 
 
            // 输出选择的文本范围（起始位置和结束位置） 
            // Event.target属性返回事件当前所在的节点 
            console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);  //打印选中文本的起始索引和结束索引
  
            // 你也可以获取并输出实际选中的文本，但需要注意浏览器兼容性  
            // 以下代码在大多数现代浏览器中有效，但在某些旧版浏览器中可能不适用  
            // 注意： selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引
            const selectedText = inputElement.value.substring(event.target.selectionStart, event.target.selectionEnd);  
            console.log('已选中文本:', selectedText);   
            }
    );

五、定时事件

监听定时事件，setInterval函数设置定时器。

 <script>

        function func1(){
            console.log("定时任务: 喝水！");
        }


        // 每隔1000ms执行一次定时任务（无限重复）
        setInterval(func1, 1000); 
 


        // 你可以在这里继续执行其他代码，setTimeout 不会阻塞主线程 
        console.log("正在执行别的代码...");
        
    </script>