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,753
  • 72
  • 57
  • 129
Tony_Henrich
  • 42,411
  • 75
  • 239
  • 374

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
  • 21,988
  • 13
  • 81
  • 109
NVI
  • 14,907
  • 16
  • 65
  • 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
  • 31,095
  • 13
  • 107
  • 185
  • 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
  • 908
  • 2
  • 14
  • 30