如何检查事件是否已触发?

5
我正在使用Chrome DevTools调试JavaScript。在我的脚本中,我使用jQuery的bind()方法将一个单击事件绑定到一个元素上。 如何检查该事件是否已被触发?
编辑: 很抱歉我没有说明清楚,我知道我可以使用console.log()或在事件侦听器主体内设置断点。我在谈论的是Chrome DevTools的开箱即用功能,它允许您在不使用控制台的情况下检查这一点,例如包含所有已触发事件及其相关信息的选项卡。

通过 alert() 函数,您可以检查事件是否被触发。 - Rakesh Kumar
2
在你的处理程序中使用 console.log('fired') - Adil Shaikh
你可以使用布尔全局变量,在声明时将其设置为false,并在处理程序中将其设置为true。 - Adil
在您绑定的函数内部的某一行设置断点,然后检查流程是否停在该行。 - Alberto Fecchi
在绑定函数内执行某些操作,例如:alert('绑定成功'); - kamesh
6个回答

12
关于Chrome,通过命令行API检查monitorEvents()。
  • Open the console via Menu > Tools > JavaScript Console.
  • Enter monitorEvents(window);
  • View the console flooded with events

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

文档中还有其他例子documentation。我猜测这个功能是在之前的答案之后添加的。


4

使用console.log()进行更加用户友好的检查(当然必须打开控制台才能看到结果):

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

或者你可以触发一个警报,不过这样会更加烦人:

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

1
警报真的很烦人。 - asprin

2
你可以尝试使用下面的代码来检查事件是否触发。
var eventFire = false;

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

0

我通常使用警告(因为我们在Rails上开发--控制台不可靠):

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

归根结底,你需要触发一些“可见”的东西来查看事件是否已触发。如果没有触发,那么要么你没有绑定到正确的元素,要么你的事件不会被触发。

希望这可以帮到你!


0

使用jQuery,请尝试以下操作:

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

然后您可以查看事件是否已触发。因此,基本上只需在函数中添加日志以指示事件何时触发即可解决问题。


0
您可以在事件处理程序中放置一个 "alert('message');",每次处理程序触发时都会弹出一个弹窗。 或者您可以在事件处理程序中放置一个 "console.log('message');",并查看日志以查看事件触发的所有时间。 或者您可以在事件处理程序中放置 "debugger",并在 Chrome 调试器中执行代码时逐步执行代码。 还有一种方法是使用 Chrome 开发工具元素面板动态查找事件处理程序并在代码中插入调试器断点。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接