jQuery: e.type + binding to multiple events at the same time FTW

delegate-refactor.js

// BEFORE
// http://jsfiddle.net/markcoleman/ffBcU/11/

var currentColor = "white";
var hold = false;

$(".canvas")
  .delegate(".pixel", "mouseover", function() {
    $(this).css("background-color", currentColor);
  })
  .delegate(".pixel", "mouseout", function() {
    if (!$(this).data("painted")) {
      $(this).css("background-color", "");
    }
    if ($(this).data("painted")) {
      $(this).css("background-color", $(this).data("painted"));
    }
  })
  .delegate(".pixel", "mousedown", function() {
    hold = true;
    $(this).css("background-color", currentColor).data("painted", currentColor);
  })
  .delegate(".pixel", "mouseup", function() {
    hold = false;
  })
  .delegate(".pixel", "mousemove", function(e) {
    if (hold) {
      var elem = document.elementFromPoint(e.pageX, e.pageY);
      if ($(elem).is(".pixel")) {
        $(elem).css("background-color", currentColor).data("painted", currentColor);
      }
    }
  });

// AFTER
// http://jsfiddle.net/cowboy/ffBcU/12/

var currentColor = "white";
var hold = false;

$(".canvas")
  .delegate(".pixel", "mouseover mouseout", function( e ) {
    var color = e.type == "mouseover" ? currentColor : $(this).data("painted") || "";
    $(this).css("background-color", color);
  })
  .delegate(".pixel", "mousedown mouseup", function( e ) {
    hold = e.type == "mousedown";
  })
  .delegate(".pixel", "mousedown mousemove", function() {
    hold && $(this).css("background-color", currentColor).data("painted", currentColor);
  });

Would it be worthwhile to cache $(this) in the mouseover mouseout handler, just in case it’s used twice (i.e. when e.type != "mouseover")?

You know, jQuery is so optimized for $(domelement) that it's almost not worthwhile to store a reference to $(this) in a var, unless you're using it lots.. or you really think it looks better, which I usually do, but didn't here for some reason. Maybe I'm going insane.

My preference is to keep the callback functions in a separate object and then reference that from the bind/delegate/live. Makes the functions independently testable without triggering the events.

Can this be done for live events?

zachleat: Great idea. But for this example, I'm just trying to show how to use the .type Event property while binding multiple events simultaneously.

bcardarella: What do you mean by "live events?"

@cowboy: http://api.jquery.com/live/

bcardarella, .live and .delegate share the same internals, so yes.

The two following code snippets are equivalent, except that the .delegate version can be more performant initially, and is arguably more clear. Also note that you don't have to delegate on document, you could delegate on any parent element, which offers more flexibility than .live, which always delegates on document.

.delegate

$(document).delegate('.something', 'click', function( e ) { 
  // code
});

.live

$('.something').live('click', function( e ) { 
  // code
});

I recommend always using .delegate instead of live.