Created
April 1, 2011 11:26
-
-
Save cowboy/898015 to your computer and use it in GitHub Desktop.
jQuery: e.type + binding to multiple events at the same time FTW
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
}); |
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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.