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

Question

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

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

现在我想调查一个事件和另一个事件之间发生了什么。因此，我想在每次事件发生时记录下来，以便我可以检查顺序是否正确。

一种方法是在每个事件监听器中编写console.log，但是可能有可能监听任何事件？并且输出它的名称？

类似于：

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

- Denis Matafonov

---

这个有帮助吗？https://dev59.com/X3A75IYBdhLWcg3wFEsI - baao

它不会，因为我正在使用自定义事件名称，而且它不是DOM元素。 - Denis Matafonov

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/

- Julien Grégoire

---

这是最接近的匹配。这也是我通过修改jQuery中的“trigger”函数得出的结论。我仍然不知道事件被称为什么对象名称，但我可以过滤掉DOM事件并查看事件的名称。 - Denis Matafonov

Answer 2

你需要修改事件分发器。想法是，在正常分派事件后，你需要特别分派另一个名为 * 的事件，并在事件数据中传递实际触发它的事件名称。然后，通过一个单一注册的 * 事件监听器可以帮助你，而无需修改所有现有的监听器。

- Sufian Saory

Answer 3

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

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

CustomEvent 接口可用于设置细节，您可以在侦听器中检索这些细节。有关更多详细信息，请参阅 CustomEvent Interface。

编辑：不幸的是，这需要在 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);

- Manoj

---

你的意思是在每个自定义事件中添加额外的数据，然后在每个监听器中都要这样做吗？这正是我不想做的——即使复制也需要花费数小时——我真的不想重写整个代码来调试它。所以问题是如何找到并监听所有自定义事件，而不必实际重写它们。 - Denis Matafonov

你没有提到你不想修改现有的监听器，“一种方法是在每个事件监听器中编写console.log，但可能可以监听任何事件？并输出它的名称？”这意味着你将会修改你的监听器。 - Manoj

“一种方法”是修改每个监听器，这很明显也很困难。我正在寻找另一种方法。 - Denis Matafonov

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/

- Sam Battat

---

我不使用DOM元素作为调度程序，因此其中没有$._data属性。jQuery允许您使用任何全局窗口属性作为调度程序，而不仅仅是DOM元素。 - Denis Matafonov