In an application using jQuery, I'd like to log to the console every time any type of event is triggered, including custom events.
Is there anyway of doing this without modifying the jQuery source, and without binding to a big long list of every possible event type?
In an application using jQuery, I'd like to log to the console every time any type of event is triggered, including custom events.
Is there anyway of doing this without modifying the jQuery source, and without binding to a big long list of every possible event type?
Share Improve this question asked Mar 25, 2011 at 16:23 Andy HumeAndy Hume 41.7k10 gold badges51 silver badges59 bronze badges1 Answer
Reset to default 8var oldTrigger = jQuery.event.trigger;
jQuery.event.trigger = function(event, data, elem) {
// do stuff
oldTrigger.apply(this, arguments);
}
Just need to throughly double check that every trigger does go through this method.
trigger: function( type, data ) {
return this.each(function() {
jQuery.event.trigger( type, data, this );
});
},
At the very least $.fn.trigger
goes through jQuery.event.trigger
// Trigger the event, it is assumed that "handle" is a function
var handle = jQuery.data( elem, "handle" );
if ( handle ) {
handle.apply( elem, data );
}
Alternatively you can overwrite jQuery.data
and intercept the setting of event handlers.
for ( var i = 0, l = this.length; i < l; i++ ) {
jQuery.event.add( this[i], type, handler, data );
}
The bind
method uses jQuery.event.add
to add handlers. You can also intercept that.
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error").split(" "), function( i, name ) {
// Handle event binding
jQuery.fn[ name ] = function( fn ) {
return fn ? this.bind( name, fn ) : this.trigger( name );
};
if ( jQuery.attrFn ) {
jQuery.attrFn[ name ] = true;
}
});
All the standard events go through $.fn.trigger
or $.fn.bind
if ( name === "live" ) {
// bind live handler
context.each(function(){
jQuery.event.add( this, liveConvert( type, selector ),
{ data: data, selector: selector, handler: fn, origType: type, origHandler: fn, preType: preType } );
});
$.fn.live
goes through jQuery.event.add
.
In conclusion everything goes through jQuery.event.add
and that in turns does this :
if ( !eventHandle ) {
elemData.handle = eventHandle = function() {
// Handle the second event of a trigger and when
// an event is called after a page has unloaded
return typeof jQuery !== "undefined" && !jQuery.event.triggered ?
jQuery.event.handle.apply( eventHandle.elem, arguments ) :
undefined;
};
}
Which is writing the event handler to jQuery.data( elem )
where elem
is a DOM Node.
[[In conclusion]]
Personally I would say jQuery.data
is plex and a pain to overwrite safely so instead just overwrite jQuery.event.add
.
[[Live Example]]
http://jsfiddle/qLRuT/8/