javascript - 处理 jQuery 中的所有事件类型

Question

在使用 jQuery 的应用程序中，我想在每次触发任何类型的事件(包括自定义事件)时都记录到控制台。

有没有办法在不修改 jQuery 源代码、不绑定(bind)到包含每种可能事件类型的长长列表的情况下执行此操作？

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。

[[实例]]

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