JavaScript的对象事件处理程序

一、对象的事件

对象的事件是指在一个对象上发生的特定动作或状态改变。对象可以是现实世界中的物体、概念、数据结构等。根据对象的类型和功能，可能会有不同类型的事件。

对象的事件一般由对象的方法或属性来处理和触发。通过定义对象的方法和属性，可以在对象上触发相应的事件，并通过事件处理器来处理这些事件。对象的事件可以用来实现对象之间的交互和协作，以及对对象的操作和状态的控制。

常见的对象事件包括：

表单事件：当用户点击一个可交互的对象（如按钮等）时触发。
键盘事件：当用户在键盘上按下或释放一个键时触发。
鼠标事件：当用户在对象上移动鼠标、点击鼠标按钮或滚动鼠标滚轮时触发。
定时事件：当到达指定的时间点或间隔时触发的事件，常用于定时任务和计时器功能。

对象的事件通常由事件监听器或事件处理器来监听和处理。事件监听器是一个特定的方法或函数，用于接收并处理特定的事件。当事件发生时，事件监听器会被调用，执行相应的操作。

二、监听鼠标事件

监听鼠标事件是指在程序中捕获和响应鼠标动作的事件。常见的鼠标事件包括鼠标点击、移动、滚轮滚动等。

常用的鼠标监听事件有：

mousedown：按下鼠标键时触发

mouseup：抬起鼠标键时触发

click：单击鼠标时触发

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

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

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

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

1.首先创建一个事件对象，以便对其操作


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

2.获取它的节点，并为这个节点创建一个鼠标事件监听器对象或函数，用于处理鼠标事件。

mousedown：按下鼠标键时触发

        box = document.getElementById("b1");

        // 为某个节点添加事件监听器
        box.addEventListener( "mousedown",  
            function(){
                console.log("你的鼠标按下了！");
            } 
        );

当鼠标左键按下时就会在控制台打印如下结果：

mouseup：抬起鼠标键时触发

        box.addEventListener( "mouseup",  
            function(){
                console.log("你的鼠标抬起了！");
            } 
        );

当鼠标左键松开时就会在控制台打印如下结果：

click：单击鼠标时触发

        box.addEventListener( "click",  
            function(){
                console.log("你的鼠标单击了！");
            } 
        );

当单击时时就会在控制台打印如下结果：

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

        box.addEventListener( "dblclick",  
            function(){
                console.log("你的鼠标双击了！");
            } 
        );

当单击时时就会在控制台打印如下结果：

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

        box.addEventListener( "mouseenter",  
            function(){
                console.log("你的鼠标进入目标元素了！");
            } 
        );

当鼠标移动到事件框时就会在控制台打印如下结果：

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

        box.addEventListener( "mouseleave",  
            function(){
                console.log("你的鼠标离开目标元素了！");
            } 
        );

当鼠标移出事件框时就会在控制台打印如下结果：

wheel：在浏览器窗口滚动鼠标滚轮时触发（需要为浏览器窗口对象添加事件监听器）

        window.addEventListener( "wheel",  
            function(){
                console.log("你的鼠标滚轮正在滚动...");
            } 
        );

当鼠标滚轮滚动时就会在控制台打印如下结果：

三、监听键盘事件

常用的键盘事件有：

keydown：按下键盘时触发

keyup：抬起键盘时触发

1.首先创建一个事件对象，以便对其操作


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

用上面这个框来存放输出的字符串

2.获取它的节点，并为这个节点创建一个键盘事件监听器对象或函数，用于处理键盘事件。

keydown：按下键盘时触发

        // 获取显示按键信息的div节点
        const outputDiv = document.getElementById('output');  
  
        // 监听整个文档的keydown事件  
        document.addEventListener('keydown',

            function(event) {  

                // 获取按键的代码（包括数字键和特殊键，如箭头键、功能键等）   
                const keyCode = event.key; 
                
                // 拼凑输出字符串
                const message = `键盘 ${keyCode}  被按下`; 

                // 将拼凑好的字符串，添加到输出区域  
                outputDiv.textContent += message + '\n';   

            }
        );

当按下键盘上的a,b,c就会出现以下结果：

keyup：抬起键盘时触发

        document.addEventListener( "keyup",
            function(event){
                console.log(`有键盘按键抬起: ${event.key}`);
            }
        )

当放开键盘上的a,b,c就会在控制台出现以下结果：

四、监听表单事件

常用的表单事件有：

        submit：单击提交时触发

        reset：单击重置时触发

        select：选中文本时触发

1.首先创建一个表单事件对象，以便对其操作

    <!-- 简单的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>

2.获取它的节点，并为这个节点创建一个表单事件监听器对象或函数，用于处理表单事件。

submit：单击提交时触发

        // 获取表单节点
        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);  
            }
        );

其中阻止表单的“默认提交行为” （即：将数据发送到表单的 action 属性指定的 URL，并在那里进行处理））然而，在前端开发中，经常会有这样的需求：在表单提交之前进行一些客户端验证在这些情况下，你需要阻止表单的默认提交行为。

比如：你可以在提交表单之前检查用户输入的数据是否有效（如检查必填字段是否已填写，电子邮件地址格式是否正确等）。如果数据无效，你可以显示错误消息而不提交表单

点击提交时出现以下结果：

reset：单击重置时触发

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

            }
        );

点击重置时出现以下结果：

select：选中文本时触发

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

选中“李四”时就会运行出以下结果：

也可以输出选择的文本范围（起始位置和结束位置）

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

选中“李四”时控制台就会打印出以下结果：

五、定时事件

要监听定时事件，使用JavaScript中的 setInterval函数来设置定时器。

1.设置两个函数在控制台打印出定时任务

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

        function func2(){
            console.log("定时任务: 去超市买酱油！");
        }

2.使用 setInterval函数监听定时事件

        // 每隔1000ms执行一次定时任务（无限重复）
        setInterval(func1, 1000); 
        // 5秒以后（仅仅）执行一次定时任务！返回的是该定时器唯一编码，可利用该编码临时取消任务
        const time_id = setTimeout(func2, 5000); 
        // 临时通知该定时器取消任务 
        clearTimeout(time_id);  


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

运行结果如下：