wen页面监听函数

<think>我们被要求回答关于JavaScript页面监听函数的使用方法。根据引用内容，我们可以总结出几种主要的事件监听方法，包括addEventListener、attachEvent（兼容旧版IE）以及直接赋值事件处理程序（如onclick）。同时，引用还提供了事件类型和事件对象的一些信息。 我们将按照以下步骤组织回答： 1. 介绍事件监听的基本概念。 2. 详细讲解addEventListener方法（现代浏览器推荐）。 3. 介绍兼容旧版IE的attachEvent方法。 4. 说明直接赋值事件处理程序（如onclick）的方式及其局限性。 5. 如何传递参数给事件处理函数。 6. 如何移除事件监听。 7. 常用事件类型总结（根据引用[4]补充）。 8. 事件对象和事件传播机制（阻止默认行为、停止传播）。 9. 示例代码。 注意：用户要求使用中文回答，并且按照系统级指令处理数学公式（虽然本问题可能不涉及数学公式，但我们仍需注意格式要求）。 由于问题中未涉及数学公式，我们将主要关注事件监听的讲解。 开始回答：</think>### JavaScript 页面监听函数使用指南 在 JavaScript 中，页面监听函数用于捕捉用户与网页的交互事件（如点击、滚动、键盘输入等）和页面状态变化（如加载完成）。以下是核心方法详解： #### 一、事件监听核心方法 1. **`addEventListener()`（现代浏览器推荐）** 语法：`element.addEventListener(event, function, useCapture)` 参数说明： - `event`：事件类型字符串（如 `"click"`、`"load"`） - `function`：事件触发时执行的函数 - `useCapture`（可选）：是否在捕获阶段处理（默认 `false` 冒泡阶段） ```javascript // 监听按钮点击 const button = document.getElementById("myButton"); button.addEventListener("click", () => { console.log("按钮被点击"); }); // 监听页面加载完成 window.addEventListener("load", () => { console.log("所有资源加载完毕"); }); ``` 2. **兼容旧版 IE 的 `attachEvent()`** ```javascript // 兼容方案（引用[2]） if (typeof target.addEventListener !== 'undefined') { target.addEventListener(eventType, functionRef, capture); } else if (typeof target.attachEvent !== 'undefined') { target.attachEvent('on' + eventType, functionRef); // IE9 及以下 } ``` #### 二、事件处理进阶技巧 1. **向监听函数传递参数** 通过匿名函数包裹实现参数传递（引用[3]）： ```javascript function greet(name) { alert(`Hello, ${name}!`); } const btn = document.getElementById("btn"); btn.addEventListener("click", () => greet("Alice")); // 传递参数 ``` 2. **移除事件监听** 使用 `removeEventListener()` 移除绑定（引用[4]）： ```javascript const handler = () => console.log("仅执行一次"); element.addEventListener("click", handler); element.removeEventListener("click", handler); // 移除监听 ``` 3. **阻止默认行为与事件传播** ```javascript element.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认行为（如表单提交） e.stopPropagation(); // 阻止事件冒泡 }); ``` #### 三、常用页面事件类型（引用[4]） | 事件类型 | 触发场景 | |--------------------|-----------------------------| | `DOMContentLoaded` | HTML 解析完成（无需等图片） | | `load` | 所有资源加载完毕 | | `scroll` | 页面滚动 | | `resize` | 窗口大小变化 | | `beforeunload` | 页面关闭前警告 | ```javascript // 监听 HTML 解析完成 document.addEventListener("DOMContentLoaded", () => { console.log("DOM 已就绪"); }); // 监听窗口关闭 window.addEventListener("beforeunload", (e) => { e.returnValue = "确定离开吗？"; // 显示确认对话框 }); ``` #### 四、实际应用示例 ```html <button id="demoBtn">测试按钮</button> <script> const btn = document.getElementById("demoBtn"); // 监听点击事件 btn.addEventListener("click", (e) => { e.stopPropagation(); console.log("按钮被点击"); }); // 监听页面滚动 window.addEventListener("scroll", () => { console.log(`当前位置: ${window.scrollY}px`); }); </script> ``` #### 注意事项 1. 避免在 HTML 中混用 `onclick="func()"`，推荐用 `addEventListener` 分离逻辑 2. 匿名函数无法通过 `removeEventListener` 移除，需使用函数引用 3. 移动端优先使用 `touchstart` 替代 `click` 提升响应速度 > 关键引用： > 事件监听方法对比 [^1] | 兼容性处理方案 [^2] | 参数传递技巧 [^3] | 事件类型与传播控制 [^4]