Question

我正在使用Chrome DevTools来调试JavaScript。在我的脚本中，我使用jQuery bind()方法将click事件绑定到元素。如何检查该事件是否被触发？

修改
抱歉，因为我没那么具体，我知道我可以使用console.log()或在事件监听器体内设置断点。我在这里讨论的是Chrome DevTools的开箱即用功能，它允许您在不使用控制台的情况下进行检查，例如包含所有使用相关信息触发的事件的选项卡。

Answer 1

关于Chrome，请通过命令行API检查monitorEvents（）。

通过菜单打开控制台＆gt;工具＆gt; JavaScript控制台。
输入monitorEvents(window);

查看充满事件的控制台

...
mousemove MouseEvent {dataTransfer: ...}
mouseout MouseEvent {dataTransfer: ...}
mouseover MouseEvent {dataTransfer: ...}
change Event {clipboardData: ...}
...

documentation中还有其他示例。我猜测在上一个答案之后添加了这个功能。

Answer 2

使用console.log()进行更加用户友好的检查（当然必须打开控制台以查看结果）：

$("#myElement").bind("click", function() {
   console.log("Fired!");
});

或者你可以提醒它，这更令人讨厌：

$("#myElement").bind("click", function() {
   alert("Fired!");
});

Answer 3

您可以尝试以下代码来检查事件是否触发。

var eventFire = false;

$("button").on("click", function() {
   eventFire = true;
if(eventFire){
    alert('Event Fired')
}   
});

Answer 4

我通常使用警报（因为我们在Rails上开发 - 控制台不可靠）：

$(document).on("event", "#element", function() { 
    alert("event");
});

最重要的是，您将不得不触发一些“可见”的事情来查看事件是否被触发。如果没有，您将不会绑定到正确的元素，或者您的事件不会被触发

希望这有帮助！

Answer 5

使用jQuery尝试以下方法：

$("#el").on("click", function() {
    console.log("Fired!");
});

然后，您可以查看该事件是否被触发。所以基本上只需在事件触发的函数中添加一个日志即可。

Answer 6

你可以发出“警告（'消息'）;”在你的事件处理程序中，每次处理程序触发时都会看到一个弹出窗口。或者你可以把“console.log（'message'）;”在您的事件处理程序中并查看日志以查看事件触发的所有时间。或者，您可以将“调试器”放在事件处理程序中，并在Chrome调试器中执行时逐步执行代码。还有一种方法可以使用chrome dev工具元素面板动态查找事件处理程序并在代码中插入调试器断点。

如何检查事件是否被触发？

6 个答案: