[英]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. 此外,我希望能够在事件与事件监听器配对时随时触发回调。
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. 我想有必要对
dispatchEvent
或其他东西进行原型设计,但我不确定。 Is this even possible? 这甚至可能吗?
Some event basics: 一些事件基础:
Given the above, it is a practical impossibility to "capture all events" using the Events API . 鉴于上述情况,使用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.
它需要为每个元素上的每个事件类型建立一个监听器,并且不可能捕获自定义事件,因为您必须知道它们以设置适当的监听器。
I imagine there would need to be a prototyping of dispatchEvent or something
我想有必要对dispatchEvent或其他东西进行原型设计
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. dispatchEvent是一个Event实例的方法,它没有被指定为构造函数(没有要求它有一个内部的
[[Construct]]
方法)因此不实用。 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. 浏览器不需要为宿主对象实现原型继承(尽管大多数都是这样),并且宿主对象和方法的实现细节在很大程度上是隐藏的,因此这不是一个选项。
You might try extending the Event API, but you really should not mess with host objects . 您可以尝试扩展Event API,但实际上您不应该使用宿主对象 。
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 (eg 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.
有一个名为“ 事件委托 ”的策略,您可以在其中计算出需要监听的事件,然后将侦听器设置为尽可能接近事件目标,而不是更改的元素(例如,如果是为需要响应的特定事件类型动态添加和删除表行或其他元素的容器div。
You can also have the functions that are modifying the DOM dispatch custom events to add listeners or whatever. 您还可以使用修改DOM调度自定义事件的函数来添加侦听器或其他任何内容。
If you really want to do this, then you can override addEventListener
to keep track of events being registered and fired. 如果您确实想这样做,那么您可以覆盖
addEventListener
以跟踪正在注册和触发的事件。
var myEventManager = (function() {
var old = EventTarget.prototype.addEventListener,
listeners = [],
events = [];
EventTarget.prototype.addEventListener = function(type, listener) {
function new_listener(listener) {
return function(e) {
events.push(e); // remember event
return listener.call(this, e); // call original listener
};
}
listeners.push([type, listener]); // remember call
return old.call(this, type, new_listener(listener)); // call original
};
return {
get_events: function() { return events; },
get_listeners: function() {return listeners; }
};
}());
However, there are uncountable reasons not to do this, not least the fact that you will quickly run out of memory as you record thousands of events such as mouse moves. 但是,有不可原谅的理由不这样做,尤其是当您记录数千个事件(如鼠标移动)时,您将很快耗尽内存。 This will also not capture event listeners set in ways such as
elt.onclick
. 这也不会捕获以
elt.onclick
等方式设置的事件侦听elt.onclick
。 Nor of course will it catch listeners set up via the old IE attachEvent
API. 它当然也不会捕获通过旧的IE
attachEvent
API设置的侦听器。 Most importantly, it will not help with you that events that are generated and listened for internally, such as a mouse click on a check box. 最重要的是,在内部生成和监听的事件(例如鼠标单击复选框)对您没有帮助。 (A complete solution would also require handling
removeEventListener
.) (完整的解决方案还需要处理
removeEventListener
。)
You can also override createEvent
and dispatch
in similar fashion, but again, that will capture only events that are explicitly created or dispatched in the JS code. 您也可以以类似的方式覆盖
createEvent
和dispatch
,但同样,它将仅捕获在JS代码中显式创建或分派的事件。
If you really want to do what you seem to be wanting to, I guess you need to fork Chrome. 如果你真的想做你想做的事,我想你需要分叉Chrome。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.