Chrome开发工具：查看页面中使用的所有事件监听器

Question

是否有一个chrome开发工具（或任何扩展）的功能，通过它我可以查看某个页面/应用程序上使用的所有事件监听器。

编辑：
它肯定不是这个问题的重复：How do I view events fired on an element in Chrome DevTools?

上述问题的解释了如何寻找当我们与我们的应用程序进行交互是被炒鱿鱼特定事件（我知道如何做到这一点！）。

我找什么是所有我们正在收听的应用程序和DOM它们连接到元素的事件的名单。

Answer 1

Chrome开发工具无法正确显示jQuery添加的事件侦听器。

这个库似乎涵盖此：https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

查找事件处理程序使用jQuery可能会非常棘手注册。 findHandlersJS使查找变得容易，您只需要事件类型和事件可能来源的元素的jQuery选择器。

Answer 2

Chrome Devtool无法为您做到这一点。但随着API铬让你可以检查那些在您的控制台：getEventListeners

只是把这个代码在你的开发工具的控制台，你可以在你的页面中的所有绑定点击事件数：

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var clks = getEventListeners(dom).click; 
    pre += clks ? clks.length || 0 : 0; 
    return pre 
    }, 0) 

结果是这样的：

3249 

那是一个很大的点击绑定。绝对不是绩效项目的好例子。

如果你想看到什么事件都在你的页面中所有的元素和多少每个事件的监听器的绑定，只要把这些代码在你的开发工具的控制台：

Array.from(document.querySelectorAll('*')) 
    .reduce(function(pre, dom){ 
    var evtObj = getEventListeners(dom) 
    Object.keys(evtObj).forEach(function (evt) { 
     if (typeof pre[evt] === 'undefined') { 
     pre[evt] = 0 
     } 
     pre[evt] += evtObj[evt].length 
    }) 
    return pre 
    }, {}) 

结果是这样的：

{ 
    touchstart: 6, 
    error: 2, 
    click: 3249, 
    longpress: 2997, 
    tap: 2997, 
    touchmove: 4, 
    touchend: 4, 
    touchcancel: 4, 
    load: 1 
} 

还有很多其他信息，你可以从这个API获得。只是即兴而已。