捕获所有事件（javascript） [英] Capture all the events (javascript)

问题描述

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

I want to be able to capture all events that are both created and dispatched and fire some callback when that happens.

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

Also, I would like to be able to fire a callback anytime an event is paired with an event listener.

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

Problems include: dynamically added elements, events whose propagation or bubbling is prevented, and custom events that are generated dynamically. I imagine there would need to be a prototyping of dispatchEvent or something, but I am unsure. Is this even possible?

推荐答案

一些事件基础：

1. 事件被调度在作为事件目标的DOM对象（通常是元素）上。


2. 事件可以首先传播到捕获阶段的子元素。这个阶段很少使用，因为直到最近才被一些广泛使用的浏览器支持。


3. 事件可以在冒泡阶段向二次传播到父元素。这个阶段是常用的。


4. 有些事件不会传播，它们既没有捕获也没有泡沫阶段（例如焦点，模糊和提交事件）。某些浏览器中传播的某些事件不会在其他浏览器中传播。


5. 响应事件的DOM元素具有事件处理程序。它可以设置为侦听特定事件，并在该事件到达元素时调用侦听器函数，在捕获，冒泡或元素是事件目标期间。


6. 侦听器可以取消传播，例如链接内的跨度上的点击事件可以取消传播，因此链接不会获得点击

1. Events are dispatched "on" a DOM object (usually an element) that is the event target.
2. Events can firstly propagate down to child elements in a capture phase. This phase is rarely used since it wasn't supported by some widely used browsers until recently.
3. Events can secondly propagate up to parent elements in a bubbling phase. This phase is commonly used.
4. Some events don't propagate, they have neither a capture or bubble phase (e.g. focus, blur and submit events). Some events that propagate in some browsers don't propagate in others.
5. DOM elements that respond to events have an event handler. It can be set to listen for particular events and call a listener function when that event reaches the element, either during capture, bubbling or if the element is an event target.
6. Listeners can cancel propagation, e.g. a click event on a span inside a link can cancel propagation so the link doesn't get the click

鉴于上述情况，它是实际上不可能使用 Events API 捕获所有事件。它需要为每个元素的每个事件类型建立一个监听器，并且不可能捕获自定义事件，因为你必须知道它们才能设置一个合适的监听器。

Given the above, it is a practical impossibility to "capture all events" using the Events API. It would require establishing a listener for every event type on every element and be impossible to capture custom events because you have to know about them to set an appropriate listener.

我想我需要做一个 dispatchEvent 原型

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

dispatchEvent is a method of an Event instance, it's not specified to be a constructor (there is no requirement for it to have an internal [[Construct]] method) so not practical to use as such. Browsers aren't required to implement prototype inheritance for host objects (though most do), and the implementation details of host objects and methods are largely hidden, so this is not an option.

您可以尝试扩展Event API，但是您确实应该 不要混淆主机对象 。

You might try extending the Event API, but you really should not mess with host objects.

您似乎关注动态添加的元素。有一种名为事件委托的策略，在那里计算出你需要监听的事件，然后在不改变的元素上设置尽可能接近事件目标的监听器（例如，如果要动态添加和删除表行，则为表元素，或者您需要响应的特定事件类型的容器div）。

It seems that you are concerned about dynamically added elements. There is a strategy called "event delegation", where you work out the events you need to listen for, then setup listeners as close to the event targets as you can on an element that doesn't change (e.g. a table element if you are dynamically adding and removing table rows, or a container div for other elements) for the specific event types you need to respond to.

您还可以使用修改DOM调度自定义事件的函数来添加听众或其他什么。

You can also have the functions that are modifying the DOM dispatch custom events to add listeners or whatever.

这篇关于捕获所有事件（javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！