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);
  });

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.