UD5工具箱
什么是事件监听器（Event Listener）？
事件监听器是JavaScript中用于响应DOM事件的函数。通过addEventListener方法绑定到元素上，当指定事件（如click、keydown）发生时，浏览器会调用对应的处理函数。它是现代Web交互的核心机制，支持同一元素绑定多个同类型事件、控制捕获/冒泡阶段、以及passive/once等优化选项。
如何查看元素上绑定了哪些事件？
在Chrome DevTools中，右键点击元素然后选择"检查"，在Elements面板中选中元素后，右侧的Event Listeners标签页会显示所有绑定的事件。本工具提供了另一种方式：通过覆盖原生addEventListener来实时追踪事件绑定，并支持在页面上直接点击选择元素查看，操作更加直观便捷。
addEventListener的第三个参数是什么？
第三个参数可以是布尔值useCapture或选项对象{capture, passive, once}。useCapture为true表示在捕获阶段触发，false（默认）在冒泡阶段触发；passive为true表示不会调用preventDefault()，浏览器可优化滚动性能；once为true表示事件只触发一次后自动移除。现代开发推荐使用选项对象形式，语义更清晰。在本工具中可以查看每个监听器使用的参数配置。
事件冒泡和捕获有什么区别？
事件传播分为三个阶段：捕获阶段（从window向下到目标元素）、目标阶段（事件到达目标元素）、冒泡阶段（从目标元素向上到window）。默认情况下，addEventListener在冒泡阶段触发。使用useCapture: true可在捕获阶段触发。理解这两个阶段对于事件委托和阻止事件传播至关重要。本工具提供了"捕获阶段"演示元素帮助理解这一概念。
什么是passive事件监听器？
passive: true选项告诉浏览器该事件处理函数不会调用preventDefault()来阻止默认行为。这使得浏览器可以立即执行默认行为（如滚动），而不必等待JS执行完毕，显著提升滚动性能。Chrome从56版本开始将touchstart和touchmove的passive默认值设为true。如果你的处理函数需要阻止默认行为，需要显式设置passive: false。
事件委托（Event Delegation）是什么？
事件委托是一种将事件监听器绑定在父元素上，利用事件冒泡机制来处理子元素事件的技术。优点是减少事件监听器数量、自动处理动态添加的子元素。React等框架广泛使用此技术。在本工具中，委托的事件会显示在父元素上，而非实际触发事件的子元素上，这是使用工具时需要注意的重要细节。
如何移除事件监听器？
使用removeEventListener(type, listener, options)可以移除之前绑定的事件监听器。注意：必须传入与addEventListener完全相同的参数（type、listener函数引用、useCapture/capture值）才能成功移除。匿名函数无法被移除（因为没有引用）。使用once: true可以让事件自动移除。本工具也会追踪removeEventListener的调用。
为什么我选择元素后看不到事件？
可能有以下原因：1）事件是在本工具加载之前绑定的，追踪只能捕获加载后的绑定；2）使用了事件委托，事件绑定在父元素上而非当前元素；3）框架（如React、Vue）使用合成事件，事件实际绑定在root节点上；4）事件已被移除（通过removeEventListener或once触发后自动移除）。建议使用页面底部的演示元素测试工具功能，确认工具正常工作后再用于实际项目调试。
本工具的数据是否会上传到服务器？
不会。本工具完全在浏览器本地运行，所有事件追踪和分析逻辑均通过前端JavaScript实现。您在工具中查看的DOM元素信息、事件监听器数据、函数源码等全部保留在本地浏览器中，不会有任何数据发送到远程服务器。您可以放心使用本工具调试包含敏感业务逻辑的页面。
为什么事件监听器列表中没有显示函数参数信息？
事件监听器的处理函数源码展示取决于函数的定义方式。如果使用具名函数或箭头函数绑定，工具可以展示完整的函数体。但如果使用匿名函数或经过代码压缩混淆后的函数，源码展示可能不完整。此外，某些框架生成的合成事件处理函数可能被包装多层，导致源码信息不够直观。建议结合浏览器DevTools的 Sources 面板进行更深入的代码调试。
本工具与Chrome DevTools的Event Listeners面板有什么区别？
两者各有优势。Chrome DevTools的Event Listeners面板可以直接查看所有已绑定的事件（包括工具加载前绑定的），但需要在DOM树中逐层查找元素。本工具的优势在于：支持鼠标直接点选页面元素无需在DOM树中查找、提供事件类型分类筛选功能、能追踪工具加载后新增的事件绑定、内置丰富的学习资源和演示元素。建议将两者结合使用，获得最佳调试体验。
工具是否支持查看框架（React、Vue等）绑定的事件？
部分支持。React、Vue等现代框架通常使用事件委托机制，将所有事件统一绑定在根节点（如document或#root）上，而非直接绑定在各个组件元素上。因此使用本工具查看React组件元素时，事件可能显示在其祖先元素上。本工具可以追踪到框架通过addEventListener绑定的事件，但框架内部的合成事件系统可能无法完全展示。建议在调试框架事件时结合框架自带的开发者工具使用。