Обработка всех типов событий в jQuery

Question

В приложении, использующем jQuery, я хотел бы входить в консоль каждый раз, когда инициируется событие любого типа, включая настраиваемые события.

Есть ли возможность сделать это без изменения источника jQuery и без привязки к большому длинному списку всех возможных типов событий?

Answer 1

var oldTrigger = jQuery.event.trigger;

jQuery.event.trigger = function(event, data, elem) {
    // do stuff
    oldTrigger.apply(this, arguments);
}

Просто необходимо тщательно проверить, проходит ли каждый триггер этот метод.

trigger: function( type, data ) {
            return this.each(function() {
                    jQuery.event.trigger( type, data, this );
            });
    },

Как минимум $.fn.trigger проходит через 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 );
            }

В качестве альтернативы вы можете перезаписать jQuery.data и перехватить настройку обработчиков событий.

for ( var i = 0, l = this.length; i < l; i++ ) {
                            jQuery.event.add( this[i], type, handler, data );
                    }

Метод bind использует jQuery.event.add для добавления обработчиков. Вы также можете перехватить это.

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;
        }
});

Все стандартные события проходят через $.fn.trigger или $.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 проходит jQuery.event.add.

В заключение все проходит через jQuery.event.add, и это по очереди делает это:

 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;
                    };
            }

, который записывает обработчик события в jQuery.data( elem ), где elem является узлом DOM.

[[ В заключение ]]

Лично я бы сказал, что jQuery.data - это сложно, и боль в том, чтобы перезаписать его безопасно, поэтому вместо этого просто перезаписать jQuery.event.add.

[[ Live Example ]]

http://jsfiddle.net/qLRuT/8/