Actually Knowing What You Are Doing – jQuery Addition

Actually Knowing What You Are Doing – jQuery Addition

THAT’S why we do that

There are times that we learn to do something in web development, and we do them without really knowing the reason why we do it. For instance. I learned a couple of things today about jQuery. The first thing was about return false; versus preventDefault (which I learned here). Now, I know the difference. The return false; kills event bubbling. That’s great, right? We don’t want that crap going up through the DOM. But what if you did? An example would be if you wanted to prevent a link from actually doing what the browser expects a link to do, AND have the parent div do something as well.


Example – here is the html:

<div id="myDiv">
<a href="http://www.google.com">This is a test link.</a>
<div class="myClass"><p>This is the div that should be hidden</p></div>
</div>

Here is the CSS:

#myDiv {
	width: 500px;
	height: 500px;
	background: none #999999;
	margin: 30px auto;
}
.redHighlight {
	color: #ff0000;
	font-weight: bold;
}

And lastly, the jQuery:

$(document).ready(function() {
$('#myDiv a').click(function() {		   
$('.myClass').addClass('redHighlight');
return false;
});
$('#myDiv').click(function()  {
$('.myClass').hide();
});
});

This took me some time fiddling with a demo to see if what the above linked article was saying was true. The above code, will do two things: add the class ‘redHighlight’ to .myClass if you click the ‘a’ tag while preventing the link to go to Google, and 2) if you click the parent of the ‘a’ tag, ‘#myDiv’, it will hide the div with the class ‘myClass’.

HERE though is what I learned. IF you click on the ‘a’ tag, it WILL add the class ‘redHighlight’. What it won’t do, is hide the div ‘.myClass’, even though it is within ‘#myDiv’. This is because the return false; prevents the click event to bubble up to its parent, therefore the click that is supposed to hide ‘myClass’ never fires. View the demo below to see what I am talking about, but click on the link, then refresh and click on the gray box.

View Demo

NOW change return false; to preventDefault, so it looks like this:

$(document).ready(function() {
$('#myDiv a').click(function(e) {
e.preventDefault();
$('.myClass').addClass('redHighlight');
});
$('#myDiv').click(function()  {
$('.myClass').hide();
});
});

View Demo

View the above demo, and again, click on the link to see what happens, refresh and click on the surrounding gray box. You will see the difference. The first demo changes the color, the second demo hides the the ‘myClass’ div. Why does it happen differently with preventDefault? Because the bubbling effect goes up to the parent div. Meaning the click event bubbles up to the parent div ‘myDiv’ and fires off the event to hide the div ‘myClass’.

PRETTY DAMN AWESOME! I knew before what event propagation meant, but I never really understood the effect it would have. Now I do because of the linked article. So remember…return false will kill event bubbling, prevents the default behavior, and stops callback execution and returns immediately when called. The preventDefault() only prevents the default behavior.

Caching the location of your selection

The second thing I learned doesn’t actually effect how I write my code. This is more of a “I didn’t know that..” type of thing. Do you know why you use variables when you are writing jQuery? If you answered “Because it is easier to write the variable name than writing the damn thing out everytime”…well you are right. BUT there is another reason. When you write a variable like:

var awesome = $('#pfarmFlavorBlastedGoldfish');

You are caching the location of that selection. If you wrote it out each time you needed it, like so:

$('#pfarmFlavorBlastedGoldfish').hide();
$('#pfarmFlavorBlastedGoldfish').show();
$('#pfarmFlavorBlastedGoldfish').eatthehelloutthem();

Yes I am eating these addicting things…but anyway, the above is repeatedly querying the DOM and creating multiple jQuery objects.

Final words

Sometimes we do things just because we read how to do them, but not the actual WHY we are doing it a certain way. I love learning the reasons behind things that I do, such as the two examples I’ve written about tonight. It strengthens my knowledge of the subject, in this case jQuery, and makes it easier to explain to someone else why it is I am doing something.

A VERY big shout out to Doug Neiner at Fuel Your Coding for that article. It taught me a lot. And a thanks to net.tutsplus.com for a bunch of helpful hints.

Coupon Code: webmachine

Tags: ,

Leave a Reply