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?

• javascript
• jquery
• events

1 Answer 1

var 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/