-
-
Save cowboy/898015 to your computer and use it in GitHub Desktop.
// 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); | |
}); |
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?"
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
.
$(document).delegate('.something', 'click', function( e ) {
// code
});
$('.something').live('click', function( e ) {
// code
});
I recommend always using .delegate
instead of live.
Would it be worthwhile to cache
$(this)
in themouseover mouseout
handler, just in case it’s used twice (i.e. whene.type != "mouseover"
)?