30

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.

Brian Tompsett - 汤莱恩
  • 5,438
  • 68
  • 55
  • 126
Tony_Henrich
  • 39,788
  • 66
  • 221
  • 365

3 Answers3

28

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.

Glorfindel
  • 20,880
  • 13
  • 75
  • 99
NVI
  • 14,371
  • 16
  • 62
  • 104
  • 5
    Cool. Keep in mind that it only recognizes event listeners added using on of supported libraries, not using the raw DOM API (addEventListener). – Nickolay Oct 13 '09 at 09:48
3

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.

Community
  • 1
  • 1
Nickolay
  • 29,618
  • 12
  • 101
  • 174
  • I want to know the event handlers that were added in JQuery's Ready() function. Events like change, blur, click, etc.. – Tony_Henrich Oct 14 '09 at 17:34
  • If the events handlers are attached using jquery, then NV's answer is what you need. – Nickolay Oct 14 '09 at 19:30
  • 1
    The bug report you linked to has links at the bottom to documentation on how to get listeners. Looks like this solution is for privileged code though (Firefox addons). – NoBugs Nov 29 '12 at 04:54
  • @NoBugs: right, since I have posted my answer, a workaround internal was implemented for Firebug. As far as I know, there's still no web API for this, although I haven't been following the developments in this area closely lately. – Nickolay Dec 02 '12 at 16:54
0

From Firefox 33 this feature (Display which elements have listeners attached) is added to inspector in . You can see 'ev' or 'event' icon next to elements which have event listeners. Clicking that displays a listing of all the event listeners bound to the element.

enter image description here

MDN - Examine Event Listeners

Pradeepal Sudeshana
  • 818
  • 2
  • 13
  • 30