处理jQuery中的所有事件类型

时间:2011-03-25 16:23:11

标签: javascript jquery events

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

在没有修改jQuery源代码的情况下是否有这样做,并且没有绑定到每个可能的事件类型的大长列表?

1 个答案:

答案 0 :(得分:8)

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/