侦听JavaScript中的所有事件

我试图找出如何侦听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

---

您可以使用不包含通配符的。像你所说的那样做一个catchall的问题是有太多的事件，你可以创建自己的。您必须创建一个数组，具体列出您正在谈论的事件，并对其进行迭代，然后分别绑定每个事件。

您可能应该选择要收听的事件，将其放入数组中，然后对每个事件进行迭代：

['click','mouseover'].forEach(function(ev) {
    el.addEventListener(ev, function() {
        console.log('event:', ev)
    })
})

---

拾取标准元素的事件

var myObj = document.getElementById('someID');
for(var key in myObj){
    if(key.search('on') === 0) {
       myObj.addEventListener(key.slice(2), myFunction)
    }
}

---

但正如@jeremywoertink提到的，任何其他事件都是可能的。

对@roman bekkiev的答案进行了更现代的改写：

Object.keys(window).forEach(key => {
    if (/^on/.test(key)) {
        window.addEventListener(key.slice(2), event => {
            console.log(event);
        });
    }
});

请注意，您可以进一步自定义要捕获的内容，例如：

---

/^on（key | mouse）/.test（key）

我讨厌这个问题在没有本地或优雅解决方案的情况下持续存在

更好的解决方案？ 这允许您使用

target.addEventListener（'*'，…）

为任何

EventTarget

订阅单个

CustomEvent

诚然，对于目标的

dispatchEvent

方法，使用

apply

上的本机

Proxy

将是一种更为自然或[也许]更为优雅的方式，但为了这篇文章，这可能传达的信息更少

要点：

已知问题 显然，这只在通过

EventTargets

的

dispatchEvent

方法驱动事件调度时起作用。也就是说，通过鼠标事件自然触发事件（例如）不起作用。需要有一种方法来包装由自然事件触发器调用的内部方法

---

也就是说，如果你有办法解决这个问题，请在另一个答案中说明你的想法。

你为什么要这样做？你有没有想过？“这是否可行？”普特凡德为什么不？不，不可能用一个函数调用就开始侦听所有事件。你需要知道这些名字。见下面的答案。我认为用户3780616正在试图找到一个在他执行不同操作时触发的事件。他正在试图找到一个事件的名称。这似乎现在被打破了。我正在努力追踪谁改变了什么，什么时候改变了什么，但到目前为止还没有运气。是的，

Event.prototype

已经改变了。不管怎么说，这是一种气味，我正在从答案中删除它。好的解决方案可以获得所有事件名称的列表，有没有办法检索所有可能事件名称的列表？这并不能回答问题Windows上的所有事件如何？@Olegzandr，Windows有什么问题？只需将

myObj

替换为

window

。但是，请注意，使用此选项，您还将侦听一些不存在的事件，例如，如果存在一个全局变量

onetwotree

，则上面的代码将向事件

“etwhotree”

添加一个侦听器。（请注意，由于箭头函数（'=>'），这在IE上不起作用。如果您想在IE上使用eventListener，请使用Roman的答案。@ryanpcmcquen我的意思是，您应该在子html节点上使用多个

Object.getPrototypeOf（）

，以获取事件属性。这是如何侦听文档上的所有事件的？您添加了一个

click

listener，这就是itTypo，我的意思是说所有的click事件。

//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)

        }
    });

    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);