2025.4.22 JavaScript 常用事件学习笔记

一、事件概述

JavaScript 事件是指在用户与网页交互或网页状态发生变化时所触发的操作。通过使用事件，可以为网页添加丰富的动态功能，实现用户与页面之间的互动，让网页不再只是静态的展示内容。

二、常见鼠标事件

1. click 事件

   • 简介 ：当用户点击鼠标左键（或者在触摸设备上轻触），然后释放时触发。这是最常用的事件之一，常用于按钮点击等操作，例如提交表单、触发某个功能执行等场景。

   • 示例代码 ：

     • HTML 部分：<button id="myBtn">点击我</button>

     • JavaScript 部分：

       document.getElementById("myBtn").addEventListener("click", function() {alert("按钮被点击了！");
       });

2. mouseover 事件

   • 简介 ：当鼠标指针移动到元素上时触发，可用于实现鼠标悬停时的视觉效果变化，比如改变元素的背景颜色、大小等，增强用户体验。

   • 示例代码 ：

     • HTML 部分：<div id="hoverDiv" style="width: 100px; height: 100px; background-color: red;">悬停我</div>

     • JavaScript 部分：

       document.getElementById("hoverDiv").addEventListener("mouseover", function() {this.style.backgroundColor = "blue"; // 鼠标悬停时背景变蓝
       });

3. mouseout 事件

   • 简介 ：与 mouseover 相对应，当鼠标指针离开元素时触发，通常与 mouseover 一起使用，用于恢复元素在鼠标未悬停时的状态。

   • 示例代码 ：（对应上面 mouseover 示例）

     document.getElementById("hoverDiv").addEventListener("mouseout", function() {this.style.backgroundColor = "red"; // 鼠标离开时恢复红色背景
     });

4. mousedown 事件

   • 简介 ：在鼠标按键被按下时触发，可以用于检测用户按下鼠标的具体按钮，结合 mouseup 事件可以实现拖拽等操作。

   • 示例代码 ：

     • HTML 部分：<div id="downDiv" style="width: 100px; height: 100px; background-color: green;">按住我</div>

     • JavaScript 部分：

       document.getElementById("downDiv").addEventListener("mousedown", function() {alert("鼠标按键被按下");
       });

5. mouseup 事件

   • 简介 ：当鼠标按键被松开时触发，常与 mousedown 一起用于处理鼠标按下与释放之间的操作逻辑。

   • 示例代码 ：

     • HTML 部分：<div id="upDiv" style="width: 100px; height: 100px; background-color: purple;">松开我</div>

     • JavaScript 部分：

       document.getElementById("upDiv").addEventListener("mouseup", function() {alert("鼠标按键被松开");
       });

三、常见键盘事件

1. keydown 事件

   • 简介 ：当用户按下键盘上的一个键时触发。可以通过 event 对象获取按下键的信息，在处理快捷键组合、键盘输入验证等场景中有广泛应用。

   • 示例代码 ：

     • HTML 部分：<input type="text" id="keyInput" placeholder="按键试试">

     • JavaScript 部分：

       document.getElementById("keyInput").addEventListener("keydown", function(event) {console.log("按下键的键码：" + event.keyCode);
       });

2. keyup 事件

   • 简介 ：当用户松开键盘上的一个键时触发，与 keydown 事件配合使用，可准确获取用户完整的按键操作过程，例如实现输入框内容的实时监测和处理。

   • 示例代码 ：（对应上面 keydown 示例）

     document.getElementById("keyInput").addEventListener("keyup", function(event) {console.log("松开键的键码：" + event.keyCode);console.log("输入框当前值：" + this.value);
     });

四、常见页面 / 窗口事件

1. load 事件

   • 简介 ：当页面中的资源（如图片、脚本等）加载完成后触发。常用于在页面完全加载后再执行某些初始化操作，确保相关元素已经存在，例如初始化图表、轮播图等需要页面元素渲染完成才能正常工作的功能。

   • 示例代码 ：

     window.addEventListener("load", function() {alert("页面加载完成！");
     });

2. resize 事件

   • 简介 ：当浏览器窗口大小被改变时触发。可用于实现响应式布局相关的调整，例如根据窗口宽度重新排列元素、调整字体大小等。

   • 示例代码 ：

     window.addEventListener("resize", function() {console.log("窗口大小改变，当前宽度：" + window.innerWidth + "，高度：" + window.innerHeight);
     });

3. scroll 事件

   • 简介 ：当用户滚动页面或某个可滚动的元素时触发。可用于实现无限滚动加载内容、固定侧边栏等效果，提升用户体验。

   • 示例代码 ：

     • HTML 部分：创建一个可滚动的长页面内容区域

     • JavaScript 部分：

       window.addEventListener("scroll", function() {console.log("页面滚动，滚动距离：" + window.scrollY);
       });

五、常见表单事件

1. submit 事件

   • 简介 ：当表单被提交时（如用户点击提交按钮或按回车键提交表单）触发。用于在表单数据发送到服务器之前进行数据验证、格式化处理等操作，确保表单数据的准确性和完整性。

   • 示例代码 ：

     • HTML 部分： `<form id="myForm"> <input type="text" name="username" required> <input type="email" name="email" required> <button type="submit">提交</button>

</form>` * JavaScript 部分： `document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单默认提交行为，进行自定义处理 // 获取表单数据并验证等操作 console.log("表单提交"); });`

1. focus 事件

   • 简介 ：当表单元素（如输入框、文本域等）获得焦点时触发，可用于实现提示信息显示、输入框样式高亮等功能，引导用户进行输入操作。

   • 示例代码 ：

     • HTML 部分：<input type="text" id="focusInput" placeholder="聚焦我">

     • JavaScript 部分：

       document.getElementById("focusInput").addEventListener("focus", function() {this.style.border = "2px solid green"; // 获得焦点时边框变绿色
       });

2. blur 事件

   • 简介 ：当表单元素失去焦点时触发，常与 focus 事件配合使用，用于在用户完成某个输入字段后进行数据验证，或者隐藏提示信息等操作。

   • 示例代码 ：（对应上面 focus 示例）

     document.getElementById("focusInput").addEventListener("blur", function() {this.style.border = "1px solid #ccc"; // 失去焦点时恢复默认边框// 这里可以添加对输入内容的验证逻辑
     });

3. change 事件

   • 简介 ：当表单元素的值发生变化时触发，例如输入框内容改变、下拉菜单选项改变等。可用于实时监测表单数据变化并作出相应处理，比如根据选择的选项更新其他相关元素的显示内容等。

   • 示例代码 ：

     • HTML 部分：

       <select id="mySelect"><option value="1">选项 1</option><option value="2">选项 2</option><option value="3">选项 3</option>
       </select>

     • JavaScript 部分：

       document.getElementById("mySelect").addEventListener("change", function() {console.log("选择的选项值：" + this.value);
       });

六、事件的绑定方式

1. 传统 HTML 事件处理器

   • 直接在 HTML 元素标签中使用以 “on” 开头的事件属性，例如 onclick、onmouseover 等，然后在属性值中编写 JavaScript 代码。

   • 示例 ：<button onclick="alert('按钮被点击')">点击我</button>

   • 优点 ：简单直观，代码量少，适合简单的事件处理。

   • 缺点 ：将 HTML 结构和 JavaScript 逻辑混在一起，不利于代码的维护和复用，难以处理复杂的事件场景和多个事件处理器的绑定。

2. DOM0 级事件处理器

   • 通过 JavaScript 直接给元素的事件属性赋值函数，语法为元素对象.事件属性名 = 函数名；。

   • 示例 ：

     • HTML 部分：<button id="myBtn">点击我</button>

     • JavaScript 部分：

       function handleClick() {alert("按钮被点击");
       }
       document.getElementById("myBtn").onclick = handleClick;

   • 优点 ：相比传统 HTML 事件处理器，分离了 HTML 和 JavaScript 代码，一定程度上提高了代码的可维护性。

   • 缺点 ：如果多次给同一个元素的同一个事件属性赋值，后面的赋值会覆盖前面的，无法为一个事件绑定多个处理函数；并且无法使用事件捕获阶段的处理。

3. DOM2 级事件监听器（addEventListener 方法）

   • 这是目前推荐的事件绑定方式，语法为元素对象.addEventListener(事件名，处理函数，[是否捕获])；，可以为同一个元素的同一个事件绑定多个处理函数，并且可以指定事件是处于捕获阶段还是冒泡阶段进行处理。

   • 示例 ：

     • HTML 部分：<div id="myDiv">点击我</div>

     • JavaScript 部分：

       document.getElementById("myDiv").addEventListener("click", function() {console.log("第一个点击事件处理函数");
       });
       document.getElementById("myDiv").addEventListener("click", function() {console.log("第二个点击事件处理函数");
       });

   • 优点 ：支持为单个元素的单个事件绑定多个处理函数，提供了更大的灵活性和强大的事件处理能力，方便处理复杂的交互逻辑，并且可以控制事件处理阶段（捕获或冒泡），更好地管理事件传播。

   • 缺点 ：在低版本的 Internet Explorer 浏览器（如 IE8 及以下）中不被支持，需要考虑兼容性问题，不过现在大部分现代浏览器都已经很好地支持了该方法。

七、事件对象

在事件处理函数中，通常会有一个事件对象（event）作为参数传入，它包含了与事件相关的各种信息和方法，例如事件的类型、发生事件的元素、鼠标位置、键盘按键等信息，以及阻止事件默认行为、停止事件传播等方法。

1. 常见的事件对象属性

   • type ：表示事件的类型，如 “click”、“mouseover” 等。

   • target ：事件的实际目标元素，即事件最初发生时的元素。

   • currentTarget ：事件处理程序当前正在处理事件的元素，即注册事件监听器的那个元素。

   • clientX 、clientY ：在鼠标事件中，表示鼠标指针相对于浏览器窗口可视区域的 X 和 Y 坐标。

   • keyCode ：在键盘事件中，表示按下键盘键的键码值。

2. 常见的事件对象方法

   • preventDefault() ：阻止事件的默认行为，例如阻止链接的跳转、表单的提交等默认操作。

   • stopPropagation() ：阻止事件的进一步传播，包括阻止事件冒泡或捕获阶段的继续传播，使事件只能在当前元素上触发相应的处理函数，不会影响到其他祖先或后代元素的事件处理。

八、事件传播

事件传播是指当一个元素触发事件时，事件会在该元素及其祖先元素之间传播，主要有两个阶段：

1. 捕获阶段 ：事件从最外层的元素（通常是 window 对象）开始，沿着 DOM 树向下传播，直到达到目标元素的父元素。

2. 冒泡阶段 ：事件从目标元素开始，沿着 DOM 树向上传播，直到 window 对象。

默认情况下，大部分事件都处于冒泡阶段，在使用 addEventListener 方法绑定事件时，可以通过第三个参数（布尔值）来指定事件处理函数是在捕获阶段还是冒泡阶段触发。例如，addEventListener("click", myFunction, true) 表示在捕获阶段触发，addEventListener("click", myFunction, false)（或者省略第三个参数）表示在冒泡阶段触发。理解事件传播对于精确控制事件的触发和处理顺序、实现复杂的功能交互非常关键，例如在处理嵌套元素的点击事件时，可以根据事件传播机制来决定如何处理各个元素的事件响应。

九、学习总结

JavaScript 事件是实现网页交互功能的核心要素之一，掌握常用的事件类型以及它们的触发时机、绑定方式和事件对象的使用方法，能够帮助开发者构建更加丰富、动态和用户友好的网页应用。在实际开发中，需要根据不同场景灵活选择合适的事件处理方式，并且注意浏览器的兼容性问题，确保代码在各种主流浏览器中都能正常运行。通过不断地实践和探索各种事件的应用，可以加深对 JavaScript 事件机制的理解，提高前端开发的能力和水平。