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

最新推荐文章于 2026-03-31 14:44:26 发布
原创 最新推荐文章于 2026-03-31 14:44:26 发布 · 3.7k 阅读 · 38 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #前端 #开发语言 #rescript #前端框架
该文章已生成可运行项目，

#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('输入框中的文本被选中了！！！');  
            }
    );

本文章已经生成可运行项目
CH040708
关注
[Java] MouseListener、MouseMotionListener 监听器与 MouseEvent 事件
Nighramet's Blogs
12-03 8260
注意： 发生鼠标点击事件时，将会依次触发以下方法： mousePressed(鼠标按下)——>mouseReleased(鼠标松开)->mouseClicked(按下
深入理解事件发布监听机制
weixin_45701550的博客
03-20 1603
什么是事件发布监听 在软件程序开发过程中，经常会遇到“事件处理模型”：调用端发送一个事件，然后相应的事件处理程序处理这个事件。最常见的就数桌面应用软件了，在这些应用程序中，当你鼠标点击了一个按钮或者键盘输入一个快捷键时，应用程序就会做出响应，来处理你的点击和键盘输入等行为。 除了这些比较直观的桌面级应用程序外，事件驱动的设计模型还经常使用在程序设计中，它可以将事件发送和事件处理逻辑进行解耦，可以针对不同的事件定义对应的事件处理程序，增加了程序的扩展性，这种设计模式又被称为观察者模式。 在事件监听处理的过程中
Node.js——事件的监听与触发
最新发布
吴声子夜歌的博客
03-31 441
使用前面介绍的on方法添加事件时，事件一旦添加就会一直存在，但如果遇到只想执行一次监听事件的情况，使用on方法就无能为力了，这时可以使用EventEmitter对象的once方法，该方法用来将单次监听器listener添加到名为eventName的事件，当eventName事件下次触发时，监听器会先被移除，然后再调用。上面的代码中，使用EventEmitter对象添加监听事件和触发监听事件的代码都放在了一个文件中，但实际应用时，通常会把添加监听事件的模块和触发监听事件的模块分开。
JavaScript事件监听、常见事件及表单验证
m0_61961937的博客
05-07 2481
JavaScript事件监听及常见事件示例，及简单表单验证示例
JS中的事件监听
热门推荐
杜永康的博客
03-30 1万+
事件监听是Web开发中非常重要的一个概念，掌握了它的用法，可以让我们实现更加丰富和动态的交互效果。在实际开发中，我们需要根据具体的需求选择合适的事件类型和事件处理函数，以及注意事件传播和事件对象的相关问题。
22 【事件监听】
DSelegent的博客
08-25 2132
22 【事件监听】
JS的DOM事件监听 （鼠标事件，键盘事件，表单事件）
d7210的博客
11-10 878
/ 阻止表单的“默认提交行为” （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））邮箱: <input type="email" id="email" value="在此处输入你的邮箱"> <br>姓名: <input type="text" id="name" value="在此处输入你的姓名"> <br>// 注意： selectionEnd 属性返回的是选择范围的结束位置的下一个字符的索引。/* 增加浏览器页面高度以便滚动 */
JavaScript事件监听
CSPsy的博客
03-06 3721
JavaScript事件监听 常用的事件监听 DOM0级事件监听 DOM2级事件监听 onclick addEventListener
JavaScript常见的对象事件
2401_82647012的博客
11-24 1984
在Web开发中，DOM（文档对象模型）事件监听是JavaScript与HTML元素进行交互的重要手段。通过监听和处理事件，我们可以响应用户的各种操作，如点击、输入、键盘按键等，从而创建动态和交互式的网页。本文将详细介绍DOM事件监听中的。
2021-08-06 JS,DOM
faharciki的博客
08-06 144
JS 事件： 当执行某件事情|某个动作触发一段js代码的执行,触发一个函数的执 行,函数js已经定义好了，事件就已经发生了 事件的组成： ​ 事件源: 谁触发的事件 ​ 事件名: 触发了什么事件 ​ 事件监听: 谁管这个事情，谁监视？ ​ 事件处理:发⽣了怎么办 分类 ​ 键盘事件 ​ 键盘按下、抬起 ​ 鼠标事件 ​ 单击事件，双击事件、移入、移出 ​ 焦点事件 ​ 聚焦、失焦 ​ 文档事件 ​ window.onload待里面内容全部加载完成之后才触发函数的执行 ​ 表单事件
HTML DOM 事件
老狼的专栏
03-07 310
HTML DOM 事件 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示：在 W3C 2 级 DOM 事件中规范了事件模型。 HTML DOM 事件 DOM：指明使用的 DOM 属性级别。 鼠标（Mouse）事件 属性 描述 DOM oncli...
JavaScript 鼠标事件监听&&触发时机&&触发顺序
jinse29的博客
04-25 7668
先说下触发时机和作用键（左键、右键）
javaScript----事件监听
drhnb的博客
06-09 1951
什么是事件： 就是在编程时系统内发生的动作或发生的事情 例如：用户在网页上单击一个按钮 什么是事件监听： 检测是否有事件发生，一旦有事件发生，就立即调用函数做出响应 例如：鼠标经过显示下拉菜单，用户点击按钮更换轮播图等
前端学习--JS入门(5) 事件监听/事件类型/事件对象
Michelle209的博客
04-06 4901
包含事件触发时相关信息的对象，比如用户按下哪个键、鼠标点击哪个元素。事件类型--触发方式（比如click/mouseover）当一个函数做参数传递给另一个函数时，这个函数是回调函数。事件是系统运行时发生的动作或者发生的事情。this--当前函数运行时所处的环境。事件源--获取被触发的dom元素。事件调用函数--触发了做什么事。mouseenter 鼠标经过。mouseleave 鼠标离开。keydown键盘按下触发。谁调用，this指向谁。click 鼠标点击。focus 获得焦点。
JS中的冒泡
m0_71912776的博客
08-18 962
例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。---针对FireFox。...
【JavaScript】事件监听详解
lph159的博客
09-10 2473
事件监听器（Event Listener）是 JavaScript 中用来监听用户交互行为的一种机制。当用户在网页上进行点击、键盘输入、滚动页面等操作时，会触发特定的事件。通过事件监听器，开发者可以为这些事件指定处理函数，从而实现网页的动态交互。点击事件click键盘事件keydownkeyup鼠标事件mousemovemouseover表单事件submitchange触摸事件touchstarttouchmove捕获阶段：事件从文档的最顶层向目标元素传播。目标阶段：事件到达目标元素。冒泡阶段。
js-事件-01
学无止境
09-01 478
js-事件一、常见事件的分类1.UI事件2.键盘事件3.鼠标事件4.焦点事件5.表单事件二、将事件绑定到元素的三种方法1. HTML事件处理程序2. 传统的DOM事件处理程序3. DOM监听器 一、常见事件的分类 1.UI事件 当与浏览器UI 本身（而不是网页）交互时发生的事件 事件 说明 load Web页面加载完成 unload Web页面正在卸载（通常是因为请求了一个新...
HTML 事件
xyq2024的博客
10-09 392
HTML事件是指在用户与网页的交互过程中，浏览器发生的一系列操作。这些操作可以是鼠标点击、键盘输入、页面滚动等。通过处理这些事件，我们可以为网页添加丰富的交互功能。HTML事件是Web开发中不可或缺的概念，它使得网页从静态转变为动态。通过掌握HTML事件的概念、类型、处理方式，我们可以为网页添加丰富的交互功能。在实际开发中，合理运用HTML事件，可以使网页更具活力和实用性。
事件类型、绑定方式
初漾的博客
08-01 555
事件类型1、表单事件：submit事件reset事件click事件change事件focus事件（不冒泡） （IE和ES5支持冒泡的focusin）blur事件（不冒泡） （IE和ES5支持冒泡的focusout）input事件（ES5 textinput提供更方便的获取输入文字的方案）2、Window事件load事件DOMContentLoaded事件readyStatechage事件unload
JavaScript学习笔记 06、DOM元素—②事件
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-07 1280
文章目录前言一、事件监听1.1、常见的鼠标事件监听1.2、常见的键盘事件监听1.3、常见的表单事件监听1.4、常见的页面事件监听二、事件传播2.1、认识捕获阶段与冒泡阶段2.2、DOM0级事件与DOM2级事件(onXXX、addEventListener())两个级别事件介绍示例测试1、捕获阶段与冒泡阶段(查看其执行顺序)2、DOM0级书写的两个相同事件(后覆盖前，只生效一个)3、DOM2级书写的两个相同事件(按照顺序执行，生效所有)4、DOM0级与DOM2级同时存在(按照顺序来)三、事件对象(event，
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值