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

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

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 3

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

    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 4

您需要修改您的事件发送者。想法是在完成调度事件后，通常你专门调度另一个名为*的事件，并在事件数据中传递触发它的实际事件名称。与为*事件注册的单个侦听器相比，可以在不修改所有现有侦听器的情况下帮助您。

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

4 个答案: