Seeing the events attached to a DOM element
There is a difference among jQuery versions when it comes to reading the events attached to a DOM element. Let’s start with the pre-1.8 version.
1: <!DOCTYPE html>
2: <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta charset="utf-8" />
5: <title>Pre 1.8</title>
6: </head>
7: <body>
8: <input type='button' id='output' value='click to see the events attached' />
9: <div id='caller'>Pre 1.8 version</div>
10: <div id='display'></div>
11: </body>
12: <!--pre 1.8 jquery-->
13: <script src="jquery-1.7.min.js"></script>
14: <script>
15: // register some events on an element
16: $('#caller').click(function () { $('#display').append('clicked on caller'); });
17:
18: $("#caller").hover(function () { $(this).css('color', 'red'); },
function () { $(this).css('color', 'black'); });
19:
20: $('#output').click(function (e) {
21: // read all the events registered
22: $.each($('#caller').data('events'), function (i, event) {
23: $("#display").append('<br/>Event=' + i);
24: $.each(event, function (j, h) {
25: $("#display").append('<br/>');
26: // the below executes the actual function attached
27: //$('#display').append(h.handler);
28: // the below gives the entire function
29: $("#display").append(h.handler.toString());
30: });
31: });
32: e.preventDefault();
33: });
34: </script>
35: </html>
I have two divs and a button. Version 1.7 of jQuery is used in this snippet and I’m registering the click and the hover events on the ‘caller’ div. As per jquery documentation, hover binds handlers for both mouseenter and mouseleave events.
When I click on the button, the $(‘#caller’).data(‘events’) code returns the events for the given DOM element. The remainder of the script is just plumbing code to loop through and see the event details. I think I have added enough comments in the click event to make it self-explanatory. Make special note of the line 27. With this, you can actually execute the event by just calling the handler.
As you can see in the below output, the events (click, mouseover and mouseout) are shown.
This got changed in version 1.8 (see here and here). So in the newer versions (I’ve used 2.0.0 for this exercise), if you want to do the same, use the snippet below.
1: <!DOCTYPE html>
2:
3: <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4: <head>
5: <meta charset="utf-8" />
6: <title>Post 1.8</title>
7: </head>
8: <body>
9: <input type='button' id='output' value='click to see the events attached' />
10: <div id='caller'>Post 1.8 version</div>
11: <div id='display'></div>
12: </body>
13: <script src="jquery-2.0.0.min.js"></script>
14: <script>
15: // register some events on an element
16: $('#caller').click(function () { $('#display').append('clicked on caller'); });
17:
18: $("#caller").hover(function () { $(this).css('color', 'red'); },
function () { $(this).css('color', 'black'); });
19:
20: $('#output').click(function () {
21: console.log($('#caller')[0]); // returns <div id='caller'>, for FYI only
22: // read all the events registered
23: $.each($._data($('#caller')[0], 'events'), function (i, event) {
24: $('#display').append('<br/>Event=' + i);
25: $.each(event, function (j, h) {
26: $('#display').append('<br/>');
27: // the below executes the actual function attached
28: //$('#display').append(h.handler);
29: // the below gives the entire function
30: $('#display').append(h.handler.toString());
31: });
32:
33: });
34: });
35: </script>
36: </html>
Most of the page is the same as the pre-1.8 example, except for the way in which you read the events registered on an element (line 23).
The output is again the same as the previous one.
So in short, use $('#caller').data('events') for pre 1.8 and $._data($('#caller')[0], 'events') for 1.8 and later versions.