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); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 ondocument
, you could delegate on any parent element, which offers more flexibility than.live
, which always delegates ondocument
..delegate
.live
I recommend always using
.delegate
instead of live.