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

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

article 2024/11/14 19:02:28

DOM事件监听是指在网页开发中，通过 JS 等脚本语言来设置一种机制，用于检测和响应 DOM 元素上发生的特定事件的过程

（注：按F12可以调出控制台）

一、DOM事件监听的鼠标事件

在 DOM中，鼠标事件是指当用户使用鼠标与网页进行交互时触发的一系列事件，下面是一些属性的用法和作用：

mousedown

按下鼠标键时触发

mouseup

抬起鼠标键时触发

click

单击鼠标时触发  

dblclick

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

mouseenter

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

mouseleave

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

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

1、按下鼠标键时触发 

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

    <script>

        box = document.getElementById("b1");

        box.addEventListener( "mousedown",

            function(){

                console.log("鼠标按下事件已触发");

            }

        );

    </script>

</body>

</html>

运行结果： 

2、抬起鼠标键时触发

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

    <script>

        box = document.getElementById("b1");

        box.addEventListener( "mouseup",

            function(){

                console.log("鼠标抬起事件已触发");

            }

        );

    </script>

</body>

</html>

运行结果：

3、单击鼠标时触发

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

    <script>

        box = document.getElementById("b1");

       box.addEventListener( "click",

            function(){

                console.log("鼠标单击事件已触发");

            }

        );

    </script>

</body>

</html>

运行结果：

4、在同一个元素上双击鼠标时触发

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

    <script>

        box = document.getElementById("b1");

        box.addEventListener( "dblclick",

            function(){

                console.log("鼠标双击事件已触发");

            }

        );

    </script>

</body>

</html>

 

运行结果：

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

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

    <script>

        box = document.getElementById("b1");

            box.addEventListener( "mouseenter",

            function(){

                console.log("鼠标进入节点事件已触发");

            }

        );

    </script>

</body>

</html>

 运行结果：

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

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

    <script>

        box = document.getElementById("b1");

 box.addEventListener( "mouseleave",

            function(){

                console.log("鼠标离开节点事件已触发");

            }

        );

    </script>

</body>

</html>

运行结果：

7、在浏览器窗口滚动鼠标滚轮时触发

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

    <script>

        box = document.getElementById("b1");

window.addEventListener( "wheel",

            function(){

                console.log("鼠标滚动事件已触发");

            }

        );

    </script>

</body>

</html>

运行结果： 

二、DOM事件监听的键盘事件

在 DOM中，键盘事件用于响应用户在键盘上的操作，下面是一些属性的用法和作用：

clientHeight

获取元素高度包括 padding 部分，但是不包括 border/margin

clientWidth

获取元素宽度包括 padding 部分，但是不包括 border/margin

scrollHeight

元素总高度，它包括 padding ，但是不包括 border/margin，  包括溢出的不可见内容

scrollWidth

元素总宽度，它包括 padding ，但是不包括 border/margin ，  包括溢出的不可见内容

scrollLeft

元素的水平滚动条向右滚动的像素数量

scrollTop 元素的垂直滚动条向下滚动的像素数量

 

<!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) {  

                // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）  

                const keyCode = event.key;

               

                // 将按键信息添加到输出区域  

                const message = `键盘 ${keyCode}  被按下`;

                outputDiv.textContent += message + '\n';  

   

                // 自动滚动到输出区域的底部

                outputDiv.scrollTop = outputDiv.scrollHeight;  

            }

        );  


 

    </script>  

</body>  

</html>

运行结果：

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​         

三、DOM事件监听的表单事件

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

        // 获取表单元素  

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

            }

        );

       

        // 添加表单重置事件监听器  

        form.addEventListener('reset',

            function(event) {  

            // 弹出警告框

            alert('表单已经重置! ');  

            }

        );

        // 获取文本输入框元素  

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

        // 添加 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);  

            // 对于更简单的用途，你可能只想输出一条消息来表示事件已被触发  

            alert('输入框中的文本被选中了！！！');  

            }

    );

    </script>  

</body>  

</html>

运行结果： 

（注：如邮箱没有@符号，则会显示错误） 


http://www.kler.cn/a/389244.html

相关文章：

  • 基于yolov8、yolov5的番茄成熟度检测识别系统（含UI界面、训练好的模型、Python代码、数据集）
  • 【JAVA】正则表达式中的中括弧
  • javascript 函数【知识点整理】
  • kettle开发-Day43-数据对比
  • Debezium系列之：发件箱事件路由器
  • 快速学习Serde包实现rust对象序列化
  • Harmony鸿蒙高级证书考试
  • 【Golang】Go语言环境安装
  • 【IC每日一题：IC验证面试--UVM验证-2】
  • 知乎日报前三周总结
  • LabVIEW编程基础教学（一）--介绍
  • Elasticsearch如果集群出现节点故障，我应该如何快速定位问题？
  • 【Linux】 IPC 进程间通信（三）（消息队列 信号量）
  • 【Kafka】Windows+KRaft部署指南
  • python manage.py命令集
  • 【微服务知识】开源RPC框架Dubbo入门介绍
  • 关于word 页眉页脚的一些小问题
  • 【论文笔记】The Power of Scale for Parameter-Efficient Prompt Tuning
  • 【Python】爬虫通过验证码
  • Python自动化运维项目管理实践：从需求分析到项目交付
  • 基于Springboot+微信小程序的健康管理系统 （含源码数据库）
  • ​ Xilinx 的开发工具Vivado开发流程​
  • Android 如何实现不编译指定的apk，不加载系统应用
  • 【Hive sql 面试题】求出各类型专利top 10申请人，以及对应的专利申请数（难）
  • 猎板PCB2到10层数的科技进阶与应用解析
  • NodeJS中process.nextTick()详解