捕获所有事件(javascript)

Question

我希望能够捕获所有创建和调度的事件,并在发生这种情况时触发一些回调.

此外,我希望能够在事件与事件监听器配对时随时触发回调.

问题包括:动态添加的元素,阻止传播或冒泡的事件以及动态生成的自定义事件.我想有必要进行原型设计dispatchEvent,但我不确定.这甚至可能吗？

Answer 1

一些事件基础知识：

1. 事件被分派到作为事件目标的 DOM 对象（通常是一个元素）上。
2. 事件可以首先在捕获阶段向下传播到子元素。此阶段很少使用，因为直到最近一些广泛使用的浏览器才支持它。
3. 其次，事件可以在冒泡阶段传播到父元素。此阶段常用。
4. 有些事件不会传播，它们既没有捕获阶段也没有冒泡阶段（例如焦点、模糊和提交事件）。在某些浏览器中传播的某些事件不会在其他浏览器中传播。
5. 响应事件的 DOM 元素有一个事件处理程序。它可以设置为侦听特定事件，并在该事件到达元素时调用侦听器函数，无论是在捕获期间、冒泡期间还是在该元素是事件目标时。
6. 侦听器可以取消传播，例如链接内跨度上的单击事件可以取消传播，因此链接不会获得点击

鉴于上述情况，使用Events API “捕获所有事件”实际上是不可能的。这需要为每个元素上的每种事件类型建立一个侦听器，并且不可能捕获自定义事件，因为您必须了解它们才能设置适当的侦听器。

我想需要有一个dispatchEvent或其他东西的原型

dispatchEvent是 Event 实例的一个方法，它没有被指定为构造函数（不要求它有一个内部构造函数）[[Construct]]方法），因此不实际使用。浏览器不需要为宿主对象实现原型继承（尽管大多数浏览器都这样做），并且宿主对象和方法的实现细节在很大程度上是隐藏的，因此这不是一个选项。

您可以尝试扩展事件 API，但您确实不应该弄乱主机对象。

看来您担心动态添加的元素。有一种策略叫“事件委托”的策略，您可以在其中计算出需要侦听的事件，然后在不更改的元素（例如，表元素，如果您是针对您需要响应的特定事件类型动态添加和删除表格行，或其他元素的容器 div）。

您还可以使用修改 DOM 的函数来调度自定义事件以添加侦听器或其他内容。