Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox extension to find out which Javascript event is bound to an inspected element?

One can bind Javascript events to html elements without using inline declarations.

Is there a way when inspecting an html element to know which events are bound to the element? I want to know about the events defined by the developer and not the internal ones that come with the browser.

So if I hover over an element and a menu shows up, I want to know which method caused it.

I have been trying Event Spy with the Code inspector but it logs too many of the internal ones, unless I am not using it right.

like image 557
Tony_Henrich Avatar asked Oct 13 '09 06:10

Tony_Henrich


People also ask

How do you find out which JavaScript Events fired?

Using Developer ToolsGo to the sources tab. Click on the Event Listener Breakpoints, on the right side. Then perform the activity that will trigger the event, i.e. click if the event that used is click, double click if it is dblclick event.

How do you find the event listener of an element?

Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.

How do I debug events in Firefox?

Using a standard event breakpoint To use an event breakpoint, you open up the JavaScript debugger, and find and expand the Event Listener Breakpoints section in the right hand column. To break when event listeners are hit, check the boxes next the events you are interested in.

How do I view events in Firefox?

Examine Events First, open up the developer tools in Firefox and switch to the "Inspector" tab. From there you will see the HTML and next to the relevant elements you will see an "event" tag that you can click on to reveal a popup of information.


2 Answers

Visual event 2

Visual event
(source: tinygrab.com)

Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements.

like image 189
NVI Avatar answered Sep 22 '22 21:09

NVI


There's no way to enumerate listeners added with addEventListener in Firefox core (bug 448602).

There may be workarounds, but I'm not aware of any. See also How to find event listeners on a DOM node when debugging or from the JavaScript code?

[edit] Oh wait, determine "which events are bound"? Did you mean which events can fire on the node? If so, you should clarify your question.

like image 34
Nickolay Avatar answered Sep 24 '22 21:09

Nickolay