Finding all js events associated with a HTML element using Chrome

Question

Is there a easy way to find all js events that are associated with a specific HTML element using Chrome?

Example:

HTML element

<a href="#" class="cancel_link refresh_page">Cancel</a>

Script:

<script type="text/javascript">
    $(function () {
       $(".cancel_link").click(function () {
          //do something
       });

       $(".refresh_page").click(function () {
          //do something
       });
    });

</script>

Right-click element, Inspect Element, in Chrome Developer Tools, in the right pane you will see 'Styles', 'Computed', and '**Event Listeners**'. That lists all events for an element. — webketje, May 21 '14 at 00:06

score 3 · Accepted Answer · answered May 21 '14 at 00:06

Find the html element in the Elements panel of the dev tools. Then click the Event Listeners tab in the right panel. In the top right hand corner of that Event Listeners panel there's a filter icon. When you click on it you can choose "All Nodes" (default) or "Selected Node Only".

score 2 · Answer 2 · answered May 21 '14 at 00:11

2

Press F12 to open Developer Tools
Click the Elements tab
Select the element you with to analyze
On the right hand side click the Event Listeners tab

From that tab you can view all of the handlers bound to the element for each event.

answered May 21 '14 at 00:11

Kent Anderson

486
2
16

score 1 · Answer 3 · edited May 23 '17 at 12:17

1

Since you seem to use jquery, here is a previously posted solution:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

you can find out more here: Can I find events bound on an element with jQuery?

edited May 23 '17 at 12:17

Community

1
1

answered May 21 '14 at 00:06

Sheraff

5,730
3
28
53

Finding all js events associated with a HTML element using Chrome

3 Answers3