jQuery.live vs jQuery.delegate (v18)

Revision 18 of this benchmark created by Mangala Sadhu Sangeet on

Description

comparison of jQuery methods live and delegate over 1000 items. jQuery.event.add changed to capture instead of bubble

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<ul id="myList">
</ul>

<script>
  jQuery.event.add = function( elem, types, handler, data ) {
                if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
                        return;
                }
  
                if ( handler === false ) {
                        handler = returnFalse;
                } else if ( !handler ) {
                        // Fixes bug #7229. Fix recommended by jdalton
                        return;
                }
  
                var handleObjIn, handleObj;
  
                if ( handler.handler ) {
                        handleObjIn = handler;
                        handler = handleObjIn.handler;
                }
  
                // Make sure that the function being executed has a unique ID
                if ( !handler.guid ) {
                        handler.guid = jQuery.guid++;
                }
  
                // Init the element's event structure
                var elemData = jQuery._data( elem );
  
                // If no elemData is found then we must be trying to bind to one of the
                // banned noData elements
                if ( !elemData ) {
                        return;
                }
  
                var events = elemData.events,
                        eventHandle = elemData.handle;
  
                if ( !events ) {
                        elemData.events = events = {};
                }
  
                if ( !eventHandle ) {
                        elemData.handle = eventHandle = function( e ) {
                                // Discard the second event of a jQuery.event.trigger() and
                                // when an event is called after a page has unloaded
                                return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
                                        jQuery.event.handle.apply( eventHandle.elem, arguments ) :
                                        undefined;
                        };
                }
  
                // Add elem as a property of the handle function
                // This is to prevent a memory leak with non-native events in IE.
                eventHandle.elem = elem;
  
                // Handle multiple events separated by a space
                // jQuery(...).bind("mouseover mouseout", fn);
                types = types.split(" ");
  
                var type, i = 0, namespaces;
  
                while ( (type = types[ i++ ]) ) {
                        handleObj = handleObjIn ?
                                jQuery.extend({}, handleObjIn) :
                                { handler: handler, data: data };
  
                        // Namespaced event handlers
                        if ( type.indexOf(".") > -1 ) {
                                namespaces = type.split(".");
                                type = namespaces.shift();
                                handleObj.namespace = namespaces.slice(0).sort().join(".");
  
                        } else {
                                namespaces = [];
                                handleObj.namespace = "";
                        }
  
                        handleObj.type = type;
                        if ( !handleObj.guid ) {
                                handleObj.guid = handler.guid;
                        }
  
                        // Get the current list of functions bound to this event
                        var handlers = events[ type ],
                                special = jQuery.event.special[ type ] || {};
  
                        // Init the event handler queue
                        if ( !handlers ) {
                                handlers = events[ type ] = [];
  
                                // Check for a special event handler
                                // Only use addEventListener/attachEvent if the special
                                // events handler returns false
                                if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
                                        // Bind the global event handler to the element
                                        if ( elem.addEventListener ) {
                                                elem.addEventListener( type, eventHandle, true );
  
                                        } else if ( elem.attachEvent ) {
                                                elem.attachEvent( "on" + type, eventHandle );
                                        }
                                }
                        }
  
                        if ( special.add ) {
                                special.add.call( elem, handleObj );
  
                                if ( !handleObj.handler.guid ) {
                                        handleObj.handler.guid = handler.guid;
                                }
                        }
  
                        // Add the function to the element's handler list
                        handlers.push( handleObj );
  
                        // Keep track of which events have been used, for event optimization
                        jQuery.event.global[ type ] = true;
                }
  
                // Nullify elem to prevent memory leaks in IE
                elem = null;
        }
  var listArray = [],
      tpl = '<li><input type="checkbox" name="check_%i" value="%i" /></li>',
      tplFn = function(value) {
    return tpl.replace(/%i/g, value);
      },
      i;
  
  // loop and create 1000 entries
  for (i = 0; i <= 1000; i++) {
   listArray.push(tFpln(i));
  }
  
  
  $('#myList').append(listArray.join(''));
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
live
$('input:checkbox').live('click', $.noop);
ready
live with context
$('input:checkbox', $('#myList')).live('click', $.noop);
ready
delegate
$('#myList').delegate('input:checkbox', 'click', $.noop);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.