我正在尝试找出如何监听JavaScript对象上的所有事件。
我知道我可以使用类似以下内容添加单个事件
element.addEventListener("click", myFunction);
element.addEventListener("mouseover", myFunction);
...
我正在尝试找出是否有全能方法，我想做类似以下的事情：
// Begin pseudocode
var myObj = document.getElementById('someID');
myObj.addEventListener(/*catch all*/, myFunction);
function myFunction() {
alert(/*event name*/);
}
// End pseudocode
Object.keys(window).forEach(key => {
if (/^on/.test(key)) {
window.addEventListener(key.slice(2), event => {
console.log(event);
});
}
});
/^on(key|mouse)/.test(key)
Object.getPrototypeOf()来获取事件属性。 - Jehong Ahnanimationiteration, animationstart, click, dblclick, mouseout, mouseevent, mousemove, mouseover, mousein, pointerout, pointerup, pointermove, pointerrawupdate, pointerover, pointerdown, blur, mousedown, mouseup, transitionrun, transitionstart, transitioncancel, transitionend, scroll, scrollend - BoKKeR获取标准元素的事件。
var myObj = document.getElementById('someID')
for (var key in myObj) {
if (key.search('on') === 0) {
myObj.addEventListener(key.slice(2), myFunction)
}
}
但正如@jeremywoertink所提到的，任何其他事件也是可能的...
我讨厌这个问题没有本地或优雅的解决方案。
使用target.addEventListener('*', ...)，您可以订阅任何EventTarget的单个CustomEvent。
clear();
/**
* @param : source := EventTarget
* * EventTarget.prototype
* * Node (Element, Attr, etc)
* @usage : [Node].addEventListener('*', ({ detail: e }) => {...}, false);
*/
function proxyEventTargetSource(source) {
var emit = source.dispatchEvent; // obtain reference
function proxy(event) {
var { type } = event, any = new CustomEvent('*', { detail: event }); // use original event as detail
if (!{ '*': true }[ type ]) emit.call(this, any); // only emit "any" if type is not any.type ('*')
return emit.call(this, event);
}
if ({ 'dispatchEvent': true }[ emit.name ]) source.dispatchEvent = proxy; // attempt overwrite only if not already set (avoid rewrapping)
return (source.dispatchEvent === proxy); // indicate if its set after we try to
}
// proxyEventTargetSource(EventTarget.prototype); // all targets
proxyEventTargetSource(document); // single target
var e = new CustomEvent('any!', { detail: true });
document.addEventListener('*', (e) => console.log('type: %s, original: %s, e: %O', e.type, e.detail.type, e), false);
document.dispatchEvent(e);
当然，一种更本地或[也许]更优雅的方法是在目标的dispatchEvent方法上使用本地的Proxy，但这可能会为了本篇文章的目的而传达得更少。
要点： https://gist.github.com/cScarlson/875a9fca7ab7084bb608fb66adff0463
显然，这仅在通过EventTargets的dispatchEvent方法驱动事件分派时有效。也就是说，通过鼠标事件（例如）自然触发事件不起作用。需要有一种方法来包装被自然事件触发调用的内部方法。
也就是说，如果您已经找到了解决此问题的方法，请在另一个答案中展示。
target.onevent属性来检索支持的事件列表，并为所有事件安装我们的监听器。for (const key in target) {
if(/^on/.test(key)) {
const eventType = key.substr(2);
target.addEventListener(eventType, listener);
}
}
EventTarget.dispatchEvent, 它被每个 Node（节点）以及因此而继承的 Element（元素）所使用。
为了监听所有这些手动触发的事件，我们可以全局代理 dispatchEvent 方法，并即时安装在我们刚刚看到的那个事件名上的监听器 ✨ ^^const dispatchEvent_original = EventTarget.prototype.dispatchEvent;
EventTarget.prototype.dispatchEvent = function (event) {
if (!alreadyListenedEventTypes.has(event.type)) {
target.addEventListener(event.type, listener, ...otherArguments);
alreadyListenedEventTypes.add(event.type);
}
dispatchEvent_original.apply(this, arguments);
};
函数片段
function addEventListenerAll(target, listener, ...otherArguments) {
// install listeners for all natively triggered events
for (const key in target) {
if (/^on/.test(key)) {
const eventType = key.substr(2);
target.addEventListener(eventType, listener, ...otherArguments);
}
}
// dynamically install listeners for all manually triggered events, just-in-time before they're dispatched ;D
const dispatchEvent_original = EventTarget.prototype.dispatchEvent;
function dispatchEvent(event) {
target.addEventListener(event.type, listener, ...otherArguments); // multiple identical listeners are automatically discarded
dispatchEvent_original.apply(this, arguments);
}
EventTarget.prototype.dispatchEvent = dispatchEvent;
if (EventTarget.prototype.dispatchEvent !== dispatchEvent) throw new Error(`Browser is smarter than you think!`);
}
// usage example
addEventListenerAll(window, (evt) => {
console.log(evt.type);
});
document.body.click();
document.body.dispatchEvent(new Event('omg!', { bubbles: true }));
// usage example with `useCapture`
// (also receives `bubbles: false` events, but in reverse order)
addEventListenerAll(
window,
(evt) => { console.log(evt.type); },
true
);
document.body.dispatchEvent(new Event('omfggg!', { bubbles: false }));
你应该选择想要监听的事件，将它们放入数组中并对每个事件进行迭代：
['click','mouseover'].forEach(function(ev) {
el.addEventListener(ev, function() {
console.log('event:', ev)
})
})
Event.prototype已经更改过了。无论如何，它都是个问题，我将其从答案中删除。 - Mosho//listening for all click events on the document
document.addEventListener('click', function (event) {
//filtering for only events that happen on elements that contain the class
//view_btn.
if (event.target.classList.contains( 'view_btn' )){
//logging out the id of the element
var id_of_clicked_element = event.target.getAttribute("id"); //
console.log("button clicked has is of " + id_of_clicked_element)
}
});