Hey Charlie,
methods such as .click() and .mouseover() are just convenience
methods. They all use .bind() internally. One nice thing about .bind()
is that you can use multiple event types with it. For example, instead
of doing this:
$('a')
.mouseover(function() {
var $link = $(this);
// do something with $link
})
.mouseout(function() {
var $link = $(this);
// do something with $link
});
You can combine them and avoid some repetition:
$('a')
.bind('mouseover mouseout', function(event) {
var $link = $(this);
if (event.type == 'mouseover') {
// do something with $link on mouseover
} else {
// do something with $link on mouseout
}
});
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Dec 4, 2009, at 11:46 AM, Charlie Griefer wrote:
Hi All:
I've read over the docs, but don't quite understand what the bind()
event provides versus just assigning a particular event handler to a
selected element (or set of elements).
For example, consider the code below. What's the difference between
the interaction with the <p> elements of class "first", and the <p>
elements of class "second"? Isn't the second bit effectively
binding a click event handler to a specific batch of "p" elements
just as the first one is?
Just not grokking it. Would appreciate if anybody could enlighten me.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p.first').bind('click', function() {
alert($(this).text());
});
$('p.second').click(function() {
alert($(this).text());
});
});
</script>
<p class="first">A</p>
<p class="first">B</p>
<p class="first">C</p>
<p class="first">D</p>
<p class="first">E</p>
<hr />
<p class="second">F</p>
<p class="second">G</p>
<p class="second">H</p>
<p class="second">I</p>
<p class="second">J</p>
--
Charlie Griefer
http://charlie.griefer.com/
I have failed as much as I have succeeded. But I love my life. I
love my wife. And I wish you my kind of success.
