处理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.

[[ 实例 ]]

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