jQuery Tutorial - 42 - Bind Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' talked
with a video tutorial for the new Boston
in this tutorial we're going to be
taking a look at the bind event handler
and how we can make use of it to make
life or code a lot more efficient so
let's take an example if we have a link
on a page I'm going to go ahead and just
outline a link it's not going to go
anywhere and I'm just going to call this
a link so let's go over to our browser
and take a look you can see that we've
just got a link here it doesn't really
do anything at the moment so what I want
to do is when I hover over this link I
want the text to change to bold so there
are other ways of obviously doing this
but with jQuery we can use the the bind
event handler to actually handle for
example all links on our page you might
want all links to be underlined when
they're click when they hovered over or
in actual fact you might not want them
to be underlined so what we can do is we
can go ahead and assign a particular
class to this when we hover over or when
we use the mouse over so we're going to
be used the mouse enter and the mouse
leave event handlers to actually go
ahead and make this bold and add a class
to this particular link so the class
that we want to create is just going to
be called bold and I'm going to just say
font-weight:bold
so wherever this class is a please apply
to a particular element in this case an
a tag or an a element or a link element
if you'd like to call it that the text
inside will turn bold so let's go ahead
and create a file that's going to handle
our events so I'm going to create a new
file and I'm going to save it inside the
j/s directory remember we're working
with index dot PHP in the root directory
when I go ahead and save it in j/s as
event j/s and in here we can start to
write code that's going to handle the
mouse enter and the mouse leave
so for example I'm going to go ahead and
select all a so I'm I'm using a selector
and all a a elements on the page now I'm
going to say mouse enter and inside here
we need to create a function so the
function will just be outlined and we
can pull this down so we can start
working inside now let's go ahead and
just alert something out to test the
usage of this so over for example or
until would be more appropriate so
inside of our browser let's go ahead and
mouse over this oh it didn't do anything
and that's because we haven't included
the script on our page so let's go ahead
and include the script so the type is
text forward slash JavaScript and the
source remember inside our J's folder
events J s so back to our browser to
test this I'm going to hover over or
mouse or mouse enter and it says enter
so we know that this event is working
now with this event this particular
mouse enter event we can then go ahead
and add a class to this at or this a tag
and that class is bold so we would
normally say this dot add class and then
we specify the name of the class which
is bold so now what's going to happen is
when we hover over the link this changes
to bold because we've added a particular
class to it obviously when we hover our
mouse comes away from this it we don't
get the same effect so we need to use
the mouse leave event to actually handle
this as well so I'm going to go ahead
and do this the long way and then we're
going to take a look at bind in order to
shorten this functionality so I'm gonna
at the end of this remember our font now
outline starts here our mouse enter here
and then we've got a function inside but
at the end of this I'm going to go ahead
and append another event on and that is
mouse leave so now inside here we can
create another function and the code in
here will be that of when the mouse
leaves this particular element so we can
again say this dot add or remove class
sorry
old so when the mouse enters this a
element so any link on the page or any a
on the page we add the class bold to the
a when the mouse leaves we then remove
the class bold from the a so it sounds
quite logical and the code is quite
short let's go just go and take a look
at the functionality when we hover over
or mouse enter and when we mouse leave
the class is removed so we now have the
functionality that we initially wanted
for our links however if we go ahead and
just get rid of this we can do this
using bind and it will make out the code
a lot shorter and obviously a lot easier
to get our head around so I'm going to
go ahead and again reference all a
elements but this time I'm going to use
the bind event handler now this is going
to take two parameters as opposed to
just creating a callback function inside
of it as we normally would do we specify
first the event that we want this to
happen on and then we specify the action
that we're going to take so this in here
is the action and this in here is the
event so on an event we're going to
perform a particular action and this
event is going to be mouse enter and
when the mouse enters we want to go
ahead and apply the bold class to this
so we just say add class bold so now
when we enter this a object we perform
this function so much extremely similar
to how we were doing it in the first
place so let's go ahead and mouse over
you see we have the same functionality
however obviously when we mouse out or
when the mouse leaves this particular
element the bold class isn't removed
so now instead of then appending
something else onto here you might think
that adding bind and then Mouse leave
and then another function here would do
the same job which it will do if we were
to say remove the class so we're using
like the same thing but this doesn't
really cut our code down or make
anything more efficient it works the
same way but obviously there's always
better ways to do things so instead what
we're going to do is with the bind event
handler we can specify a series of
events that we want to use so for
example mouse enter and mouse leave so
now on mouse enter and on mouse leave we
add a class to bold and obviously this
isn't gonna work it doesn't really make
sense when we mouse over a mouse leave
we're just adding the class once again
however just taking a minute to research
different you know different things
class functions we know that there is a
toggle class function and what toggle
class will do is it will check if a
particular class is applied and if it is
it remove it and if it's not applied it
will add it so much like the toggle as
in where you would show something show a
particular element with jQuery what
we're now doing is on mouse enter and
mouse leave we're toggling this bold
class so now what's going to happen is
when we go in the toggle class obviously
saw that the bold class wasn't applied
to this element so it applied it but now
when we mouse out again which is this
part of here Mouse leave we remove the
class because it was already added to
that particular element so using bind
has cut our code down dramatically from
I think six lines to three lines and
we've also created something that's more
you know acceptable to how you would
usually write something you know what's
the point in writing additional code
when you can write that code in these
three lines what's essentially regarded
as the correct way so just using
you can go ahead and use it obviously
with any other element and any event
that would be appropriately associated
with that element so we can choose to
use lots of different events and lots of
and apply that to lots of different
elements and we have toggle found in a
variety of places as well so we can use
toggle if appropriate so that's the bind
event handler in jQuery and how useful
it can be