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

原创最新推荐文章于 2026-05-06 10:48:21 发布 3.7k 阅读 AI写同款

CH040708

217粉丝22篇原创

关注

[Java] MouseListener、MouseMotionListener 监听器与 MouseEvent 事件注意：发生鼠标点击事件时，将会依次触发以下方法： mousePressed(鼠标按下)——>mouseReleased(鼠标松开)->mouseClicked(按下阅读详情

AI摘要

本文介绍了DOM事件监听机制，它允许JavaScript在HTML文档元素上监听特定事件，使网页能响应用户交互。详细阐述了监听鼠标事件（如mousedown、dblclick等）、键盘事件（keydown、keyup等）以及表单事件（提交、重置等）的相关内容，还给出了部分代码运行情况。

#DOM（Document Object Model）事件监听是一种机制，它允许 JavaScript 代码在 HTML 文档中的元素上监听特定的事件。当这些事件发生时，与之关联的 JavaScript 函数（也称为事件处理函数）就会被执行。这使得网页能够对用户的交互行为做出响应，如点击按钮、按下键盘按键、提交表单等。#

一、监听鼠标事件

1.简介

当按下鼠标按键（左、右键均可）触发事件的发生。

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

2、mousedown 事件

这是最常见的鼠标事件之一。当用户在一个元素上按下并释放鼠标左键时触发。

<!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;
        }
    </style>
</head>
<body>
    <div class="box" id="b1">事件</div>
    <script>
       box = document.getElementById("b1");
        box.addEventListener( "click",
            function(){
                console.log("鼠标单击事件已触发");
            }
        );
    </script>
</body>
</html>

代码运行后如下：

3.mousedown 和 mouseup 事件

当用户在一个元素上抬起和点击时鼠标左键时触发。

<!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;
        }
    </style>
</head>
<body>
    <div class="box" id="b1">事件</div>
    <script>

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

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

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

代码运行后如下:

4.dblclick 事件

当用户在一个元素上快速连续地两次点击鼠标左键时触发。

<!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;
        }
    </style>
</head>
<body>
    <div class="box" id="b1">事件</div>
    <script>
        box.addEventListener( "dblclick",
            function(){
                console.log("鼠标双击事件已触发");
            }
        );

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

代码运行后如下：

5.mouseenter 和 mouseleave 事件

mouseover事件在鼠标指针进入一个元素时触发，mouseout事件在鼠标指针离开一个元素时触发。

<!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;
        }
    </style>
</head>
<body>
    <div class="box" id="b1">事件</div>
    <script>
        box.addEventListener( "mouseenter",
            function(){
                console.log("鼠标进入节点事件已触发");
            }
        );

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

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

代码运行后如下：

6. 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>
        body {  
         height: 3000px; /* 增加浏览器页面高度以便滚动 */  
        }
    </style>
</head>
<body>
    <script>
       box = document.getElementById("b1");
        // 窗口监听鼠标滚动
        window.addEventListener( "wheel",
            function(){
                console.log("鼠标滚动事件已触发");
            }
        );

    </script>

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

代码运行后如下：

二、监听键盘事件

1、keydown事件

keydown事件在用户按下键盘上的一个键时触发，可以用于实现一些快捷键功能等。例如，在整个文档级别监听键盘事件：

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

            function(event) {  
                console.log(`键盘 ${event.key}  被按下`)
            }
        );  


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

代码运行后如下：

2、keyup事件

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>  
  
    <script>  
        // 获取显示按键信息的元素  
        const outputDiv = document.getElementById('output');  
  
        // 监听整个文档的keyup事件  
      document.addEventListener( 'keyup',

            function(event) {  
                console.log(`键盘 ${event.key}  被按下`)
            }
        );  


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

代码运行后如下：

3、keycode事件

获取按键的代码（包括数字键和特殊键，如箭头键、功能键等），将按键信息添加到输出区域。

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

            function(event) {  
                console.log(`键盘 ${event.key}  被抬起`)

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


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

代码运行后如下：

4、解决自动滚动到输出区域

clientHeight 获取元素高度包括 padding 部分，但是不包括 border/margin
clientWidth 获取元素宽度包括 padding 部分，但是不包括 border/margin
scrollHeight 元素总高度，它包括 padding ，但是不包括 border/margin，包括溢出的不可见内容
scrollWidth 元素总宽度，它包括 padding ，但是不包括 border/margin ，包括溢出的不可见内容
scrollLeft 元素的水平滚动条向右滚动的像素数量
scrollTop 元素的垂直滚动条向下滚动的像素数量
outputDiv.scrollTop = outputDiv.scrollHeight;

三、监听表单事件

form对象（称表单对象或窗体对象）是document对象的子对象，提供一个让客户端输入文字或选择的功能。通过form对象可以访问表单对象的属性及方法

1、建立一个简单的表单

<!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>  
  
    <script>
    </script>  
</body>  
</html>

2、获取表单元素

 const form = document.getElementById('myForm');

3、添加“表单提交”事件监听器

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

            // 阻止表单的“默认提交行为”  （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））
            // 然而，在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证
            // 在这些情况下，你需要阻止表单的默认提交行为。
            // 比如： 你可以在提交表单之前检查用户输入的数据是否有效（如检查必填字段是否已填写，
            // 电子邮件地址格式是否正确等）。如果数据无效，你可以显示错误消息而不提交表单

             event.preventDefault();  
            // 弹出警告框（在实际应用中，你可能会在这里进行AJAX请求或其他处理） 
            alert('表单提交按钮被按下! (但默认提交行为被截止了)');  


            // 你可以在这里添加其他代码来处理表单数据  
            // 例如，获取输入值：  
            const name = document.getElementById('name').value;  
            const email = document.getElementById('email').value;  
            console.log('Name:', name);  
            console.log('Email:', email);  
            }
        ); 
    </script>  
</body>  
</html>

代码运行后如下：

4、添加表单重置事件监听器

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

代码运行后如下：

5、设置文本范围

（1）、获取文本输入框元素

const inputElement = document.getElementById('name');

（2）、添加 select 事件监听器

   inputElement.addEventListener('select', 
            function(event) { 
            }
    );

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

        inputElement.addEventListener('select', 
            function(event) {  
            // 输出选择的文本范围（起始位置和结束位置） 
            Event.target属性返回事件当前所在的节点 
            console.log('选中的文本范围:', event.target.selectionStart, event.target.selectionEnd);  
  

            }
    );

（4）、获取并输出实际选中的文本

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

            }
    );

（5）、输出一条消息来表示事件已被触发

        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);  
  
            // 对于更简单的用途，你可能只想输出一条消息来表示事件已被触发  
            alert('输入框中的文本被选中了！！！');  
            }
    );

标签