跟踪全局变量的所有自定义事件

Question

我有一个全局变量，我们称它为 jsEvents，它作为项目中所有事件的调度程序。大约有 200 个侦听器和大约相同数量的自定义事件，例如

$(jsEvents).on('customEvent', function(){
//doing something
})

现在我想调查一个事件和另一个事件之间到底发生了什么。所以我想记录每个事件发生的时间，这样我就可以检查顺序是否正确。

一种方法是在每个事件侦听器中写入 console.log，但是否可以侦听 any 事件？并输入它的名字？

类似于

$(jsEvents).on('*', function(){
//here I want to console.log event's name
})

Answer 1

我认为这可以通过在您的自定义事件中添加额外数据并在侦听器中检索相同数据来完成

    var event = new CustomEvent('build', { 'detail': elem.dataset.time });
    function eventHandler(e) {
    console.log('The time is: ' + e.detail);
    }

CustomEvent 接口可用于设置您可以在侦听器中检索的详细信息。更多详情请参考 CustomEvent Interface

Eidt: 不幸的是，这需要在 customEvent 中提供详细信息，同时可以避免添加详细信息通过使用 console.log("Custom event is " event.type);

var event = new CustomEvent('build');
function eventHandler() {
console.log('The event is: ' + event.type);
}
document.addEventListener('build',eventHandler,true);
document.dispatchEvent(event);

Answer 2

您需要修改您的事件调度程序。想法是，在您通常完成分派事件之后，您专门分派另一个名为 * 的事件，并在事件数据中传递触发它的实际事件名称。与注册 * 事件的单个侦听器相比，无需修改所有现有侦听器即可为您提供帮助。

Answer 3

我认为您需要的是一种将所有事件绑定到一个元素的方法：

function getAllEvents(element) {
    var result = [];
    var events = $._data( element[0], "events" );
    for(e in events){
        result.push(e);
    }
    return result.join(' ');
}

然后使用它来创建调试器侦听器：

//listener
$('#testElem').on(allEvents, function(e){
    console.log('the event is :', e);
});

演示：https://jsfiddle.net/qhwfzxzb/

Answer 4

为了调试，您可以覆盖 jQuery 事件对象的分派。例如：

var temp = $.event.dispatch;

$.event.dispatch = function(event){
    // the event that is passed is the native event, if you want the jquery
    // event, you need the fixed event.
    console.log(jQuery.event.fix( event ));
    temp.call(this, event);
}

https://jsfiddle.net/8a530fjx/

跟踪全局变量的所有自定义事件

Track all custom events on global variable

javascript

jquery

event-handling

jquery-events