编程笔记

编程笔记

【超详细!】JavaScript的事件监听(监听鼠标事件、监听键盘事件、监听表单事件)
2025-01-29

        在JavaScript中,事件监听用于检测页面上发生的特定事件,例如用户点击按钮、鼠标移动、键盘按键按下等。事件定义了用户与网页交互时产生的各种操作。

添加事件监听器的方法:

  • 使用addEventListenter:它接受两个必需参数和一个可选参数。

1、第一个参数是要监听的事件类型,比如"click" (点击事件)、"mouseover"(鼠标移到元素上方事件)等,是字符串形式。
2、第二个参数是当事件发生时要执行的函数。
3、可选的第三个参数是一个布尔值。

<script>
        const button = document.getEleventById("b1");    // 获取节点

        button.addEventListenter("click",        // 第一个参数

                function(){                      // 第二个参数

                    console.log("按钮被点击了")   // 第三个参数

                });
</script>

 一、监听鼠标事件 

        常用的鼠标事件有MouseDown、MouseUp、MouseEnter、MouseLeave、 Click、DbClick及wheel等事件。

1、MouseDown事件

        在按下鼠标左或右键时,就会发生MouseDown事件。例如:

<div class="box" id="b1">事件</div>
 <script>
// 获取节点
        box = document.getElementById("b1");

// 为某个节点添加事件监听器
        box.addEventListener( "mousedown",   // mousedown:按下鼠标键时触发
            function(){
                console.log("你的鼠标按下了!");
            } 
        );
</script>

        这里监听了div元素的mousedown事件,当你点击这个div时,会在控制台输出相应的信息。 图片显示:

2、MouseUp事件

        当在元素上松开鼠标左或右键时,就会发生MouseUp事件。例如:

<div class="box" id="b1">事件</div>
<script>
    box = document.getElementById("b1");
// mouseup:抬起鼠标键时触发
     box.addEventListener( "mouseup",  
            function(){
                console.log("你的鼠标抬起了!");
            } 
        );
</script>

        这里监听了div元素的mouseup事件,当你点击这个div后抬起时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示: 

3、MouseEnter事件

        在鼠标指针进入该元素的边界时会触发mouseenter事件。例如:

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

    <script>
        box = document.getElementById("b1");

// mouseenter:鼠标进入一个节点时触发,进入子节点不会触发这个事件
         box.addEventListener( "mouseenter",  
            function(){
                console.log("你的鼠标进入目标元素了!");
            } 
        );
</script>

        这里监听了div元素的mouseenter事件,当你的鼠标指针进入这个div的边界时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示: 

4、MouseLeave事件

        与mouseenter事件相反,在鼠标指针离开该元素时会触发mouseleave事件。例如:

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

<script>
  box = document.getElementById("b1");

 // mouseleave:鼠标离开一个节点时触发,离开父节点不会触发这个事件
   box.addEventListener( "mouseleave",  
            function(){
                console.log("你的鼠标离开目标元素了!");
            } 
        );
</script>

         这里监听了div元素的mouseleave事件,当你的鼠标指针离开div时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示:  

5、Click事件

        当鼠标指针点击元素,然后松开鼠标左键时,就算完成一次click事件。例如:

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

    <script>

box = document.getElementById("b1");

 box.addEventListener( "click",  
            function(){
                console.log("你的鼠标单击了!");
            } 
        );        // click:单击鼠标时触发 

</script>

        这里监听了div元素的click事件,当你的鼠标单击div时,会在控制台输出相应的信息。图片显示:  

6、DbClick事件

        当鼠标指针连续两次点击松开,就算完成一次dbclick事件。例如:

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

    <script>

box = document.getElementById("b1");

 box.addEventListener( "dbclick",  
            function(){
                console.log("你的鼠标双击了!");
            } 
        );        // dbclick:双击鼠标时触发 

</script>

        这里监听了div元素的dbclick事件,当你的鼠标双击div时,会在控制台输出相应的信息。图片显示:  

7、wheel事件

        当鼠标滚轮转动时,就会发生wheel事件(以浏览器窗口滚动为例)。例如:

<script>
 // 为浏览器窗口对象添加事件监听器:以滚动监听为例

window.addEventListener( "wheel",   // wheel:在浏览器窗口滚动鼠标滚轮时触发
            function(){
                console.log("你的鼠标滚轮正在滚动...");
            } 
        );

</script>

        这里监听了浏览器窗口的wheel事件,当你的鼠标滚轮转动时,会在控制台输出相应的信息(这个事件适用于普通按钮、网页及超链接)。图片显示:  

二、监听键盘事件

        常见的键盘事件有keydown和keyup等事件。

1、KeyDown事件

             在JavaScript中添加keydown(键按下时)的监听事件。例如

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

        // keydown:按下键盘时触发
  
        // 获取显示按键信息的div节点
        const outputDiv = document.getElementById('output');  
  
        document.addEventListener( "keydown",
            function(event){
                console.log(`有键盘被按下: ${event.key}`);
            }
        )
     </script>

        给id 为output 的输入框添加了keydown(键按下时)键盘事件监听。当在输入框内操作键盘时,会在控制台输出相应信息,包括键码(通过event.key获取,不同的键对应不同的键码值)。 如图:

2、KeyUp事件 

        在JavaScript中添加keyup(键松开时)的监听事件。例如:

<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> 
     // keyup:抬起键盘时触发
         // 获取显示按键信息的div节点
         const outputDiv = document.getElementById('output');  
  
         document.addEventListener( "keyup",
             function(event){
                console.log(`有键盘松开: ${event.key}`);
            }
         )
</script>

         给id 为output 的输入框添加了keyup(键按下时)键盘事件监听。当在输入框内操作键盘时,会在控制台输出相应信息,包括键码(通过event.key获取,不同的键对应不同的键码值)。 如图:

 

三、监听表单事件        

        在网页开发中,表单(如<form> 元素包含的各种输入框、下拉框、按钮等组件)。这是一个简单的表单。如图:

代码显示:

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

        常见的表单监听事件包括submit事件、 reset事件、select事件等。

 1、submit事件

        当你点击表单中的提交按钮时,会触发submit事件。例如:

<script>  
        // 获取表单节点
        const form = document.getElementById('myForm');  
  
        // 添加“表单提交”事件监听器  
        form.addEventListener('submit', 
            function(event) {  
  
            // 获取输入值:  
                const name = document.getElementById('name').value;  
                const email = document.getElementById('email').value;  
                console.log('Name:', name);  
                console.log('Email:', email);  
            }
        ); 

如图:

         在submit事件中也有阻止表单的“默认提交行为”。如图:

 代码显示:

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

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

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

2、reset事件 

         当你点击表单中的重置按钮时,会触发reset事件。例如:

    <script>  

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

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


            }
        );
    </script>  

        在按下“确定”键后会显示初始画面。 

3、select事件 

        在JavaScript用于网页开发时,select事件通常用于检测用户在文本输入框 
 中选择文本内容的操作。例如:

<script>

   // 1.获取姓名输入框节点
        const inputElement = document.getElementById('name'); 
    //     // 2.为表单的姓名输入框添加 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> 

        在上述代码中,给id 为name的输入框添加了select事件监听。当用户在该输入框内通过鼠标拖动或其他方式选择部分文本内容时,就会触发select事件,然后在控制台输出选中的具体内容(通过获取输入框当前值,并根据selectionStart和selectionEnd确定选中部分的起止位置来截取相应内容)。如图: