How to bind all events to a DOM element?

Question

How to bind all events (i.e. click , keypress , mousedown ) with a DOM element using jQuery, without listing each of them separately?

Example:

 $('#some-el').bind('all events', function(e) { console.log(e.type); }); 

Answer 1

There is a simple (but inaccurate) way to check all events:

 function getAllEvents(element) { var result = []; for (var key in element) { if (key.indexOf('on') === 0) { result.push(key.slice(2)); } } return result.join(' '); } 

then link all events as follows:

 var el = $('#some-el'); el.bind(getAllEvents(el[0]), function(e) { /* insert your code */ }); 

Answer 2

You can also override jQuery.event.trigger to catch every event, but I think this method is only good for learning an external API, not for production:

 var oldJQueryEventTrigger = jQuery.event.trigger; jQuery.event.trigger = function( event, data, elem, onlyHandlers ) { console.log( event, data, elem, onlyHandlers ); oldJQueryEventTrigger( event, data, elem, onlyHandlers ); } 

Answer 3

If you want to associate several events with the same function, just separate them with spaces.

 $("#test").bind("blur focus focusin focusout load resize scroll unload click " + "dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + "mouseleave change select submit keydown keypress keyup error", function(e){ $("#r").empty().text(e.type); }); 

A simple example in jsfiddle

Answer 4

jQuery has changed the way events are saved, several ways to retrieve a list depending on which version you are using. I encapsulated the "latest" version in the plugin , but essentially you want:

 var events = $._data($('yourelement')[0], "events"); 

This gives a nested list of all related events grouped by "base" event (without a namespace).

However, I just realized that you want all your own jQuery events - you can check $.event , which has some of them in $.event.special , but the accepted answer may still be your best bet. You can also see what jQuery lists as possible binding functions .

Answer 5

Here is a small extension for jQuery:

 $.fn.onAny = function(cb){ for(var k in this[0]) if(k.search('on') === 0) this.on(k.slice(2), function(e){ // Probably there a better way to call a callback function with right context, $.proxy() ? cb.apply(this,[e]); }); return this; }; 

Using:

 $('#foo').onAny(function(e){ console.log(e.type); }); 

Also you can just use the browser console (from this answer ):

 monitorEvents($0, 'mouse'); // log all events of an inspected element monitorEvents(document.body); // log all events on the body monitorEvents(document.body, 'mouse'); // log mouse events on the body monitorEvents(document.body.querySelectorAll('input')); // log all events on inputs 

Answer 6

I don’t think jQuery supports any template (this would be difficult and fraught with danger), but the list of standard events is finite (although, unfortunately, it’s a bit scattered around the DOM2 event specification , the HTML DOM2 specification and the DOM3 events spec ), you can always just list them. jQuery allows you to specify multiple event names for binding (delimited delimiters), for example:

 $('#some-el').bind('click dblclick mouseover mouseout' /* etc.*/,function(e){ console.log(e.type); }); 

Answer 7

I took the Mark Coleman script and improved it a bit for my needs.

I would like to share it with you: http://jsfiddle.net/msSy3/65/

 var lastEvent = null, countEvent = 0; $("#test").bind("blur focus focusin focusout load resize scroll unload click" + " dblclick mousedown mouseup mousemove mouseover mouseout mouseenter " + "mouseleave change select submit keydown keypress keyup error", function (e) { if (lastEvent !== e.type) { countEvent++; $("#r").prepend("<span>" + countEvent + ": " + e.type + "<br></span>"); $("#r > span:nth-child(21)").remove(); lastEvent = e.type; } });