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

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

对于调试，您可以覆盖 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/

Answer 2

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

    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 3

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

Answer 4

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

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/