javascript 如何检查事件是否被触发?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22090604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 22:24:57  来源:igfitidea点击:

How to check if an event was fired or not?

javascriptjquerygoogle-chrome-devtools

提问by ahmehri

I'm using Chrome DevTools to debug JavaScript. In my script I bound a click event to an element using the jQuery bind()method. How to check if that event was fired or not?

我正在使用 Chrome DevTools 来调试 JavaScript。在我的脚本中,我使用 jQuerybind()方法将点击事件绑定到一个元素。如何检查该事件是否被触发?

Edit
Sorry because I wasn't so specific, I know that I can use console.log()or set a breakpoint inside the event listener body. What I'm talking about here is an out of box feature of the Chrome DevTools that allows you to check that without using the console, e.g a tab that contains all the events that were fired with related information.

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

回答by Manjunath Raddi

Regarding Chrome, checkout the monitorEvents() via the command line API.

关于 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: ...}
    ...
    
  • 通过菜单 > 工具 > JavaScript 控制台打开控制台。
  • 进入 monitorEvents(window);
  • 查看充斥着事件的控制台

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

There are other examples in the documentation. I'm guessing this feature was added after the previous answer.

文档中还有其他示例。我猜这个功能是在上一个答案之后添加的。

回答by Pavel ?těrba

Use console.log()for more user friendly check (console must be opened of course to see the result):

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

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

Or you can alert it, which is much more anoying tho:

或者你可以提醒它,这更烦人:

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

回答by Rakesh Kumar

You can try below code to check if event fire or not.

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

var eventFire = false;

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

回答by Richard Peck

I normally use an alert (because we develop on Rails -- console is unreliable):

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

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

The bottom line is you're going to have to trigger some "visible" thing to see if the event fired. If it doesn't, you'll either not be binding to the correct element, or your event won't be firing

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

Hope this helps!

希望这可以帮助!

回答by Oz Lodriguez

Using jQuery Try the following:

使用 jQuery 尝试以下操作:

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

You can then see if the event was fired or not. So basically Just add a log in your function of where the event is triggering should do the trick.

然后您可以查看事件是否被触发。所以基本上只要在你的函数中添加一个事件触发位置的日志就可以了。

回答by Ted Cohen

You can put an "alert('message');" in your event handler and see a popup each time the handler fires. Or you can put a "console.log('message');" in your event handler and review the log to see all the times that the event fired. Or you can put "debugger" in your event handler and step through your code as it executes in the chrome debugger. There is also a way to dynamically find an event handler and insert a debugger break point in your code using the chrome dev tools elements panel.

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