Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's start by seeing how to use jQuery to wire up event handlers to elements on our page. And so here in the API Documentation section on the jQuery site, I'm just going to scroll on down to the Events section, and I'll click on Event Handler Attachment. And the functions that we're going to be covering are the on and off functions. On is used to attach an event handler for one or more events to the selected elements in the page, and then the off function removes an event handler.
Now, you might see older jQuery code using functions like bind and functions like unbind, and there are functions like live and die. These functions are from older versions of jQuery, and you can see that some of them have already been deprecated. So, for example die and live, they've been deprecated as of jQuery 1.7. Bind and Unbind still work, but at some point, they'll be deprecated too, and the on and off functions are pretty much the way forward for attaching events. So, let's take a quick look at the on function.
Here, in the on function, you can see it takes a variety of arguments. The Events argument is a space-separated string for the events that you want to attach, for example click or mouse down or mouse up or whatever. The selector argument here is optional, and that's used to filter out descendents of the selected elements that are going to trigger the event. And we're not going to cover that right now, but we will see it a little bit later. The data argument can be anything. That's just any arbitrary data that you want passed to the event handler when the event is triggered.
So, if there's some data that you want to use inside your event handler, you can do that. And then there's the handler argument, which essentially is the function that's going to be triggered when the event happens. That's where your event handling code will be. Enough of me just talking about it; let's go over to the code and actually see this in action. So, what I'm going to do is bring up the binding_start file in the browser. So let me just launch that. And this is the test file that we're going to be using to exercise these functions. You can see that right now it doesn't do anything.
But when we get finished, this will be causing some change in the page when I mouse over and mouse out of this element. Let's go over to the code. Here in the code for my example file, a couple of things I want to point out. First, we have a couple of style sheets, one called normal, one called highlighted, and those will become obvious in a moment. Down here I have a div. It has an ID of evtTarget, and the current class is the normal class, which is this one right here. And we're going to wire up some event handlers for when the user mouses over and mouses out of this div, and we're going to respond to that event by changing the class to the highlighted class.
So, this will be changing between yellow and red as the mouse comes in and out of the element. I'll start off by getting a reference to the event target element. So, I'm just going to write #evtTarget. That gets me my target element. And I'm going to write on. Inside on, I'm going to pass mouseover mouseleave. These are the two events that I want to attach a handler for, and I'm going to write highlight.
Highlight is a function that I'm going to write that handles the event. It's going to be my event handler function. Let's go ahead and write that right now. I'm going to put that actually outside of my document ready function. So I will write function highlight, and that takes an event argument because it's an event handler. Inside the highlight function, I'm going to get a reference to my evtTarget again. And this time I'm going to use the CSS helper function called toggleClass, and toggleClass is basically going to either remove or add the highlighted CSS style sheet, which is this guy right here.
So, let's go ahead and save that. Let's just go ahead and run what we have right now. So, I'm going to go back to the browser, and I'm going to refresh. Now, you can see that when the mouse is over the element, the highlighted CSS class gets added, and then when I mouse out, it gets removed. So that's the toggleClass in action right there. Let's go back to the code for a second. Now, let's add a handler for the mouse- clicking event which will turn off the highlighting behavior.
I'm also going to add a handler here for my evtTarget. And in this case, I'm going to say on("click". This time I'm just going to pass an anonymous function right in here which is an event handler, so it takes an event. And inside this event handler I am going to do two things. First, I'm going to get my evtTarget, and I'm going to do the off function.
So now, I'm going to turn off the mouseover and mouseleave event handler, which is the highlight function. After I turn off the event, I'll just put in some content in the div that says hey! You know, you turned it off. So I'll say ("#evtTarget").html, and in there I'll just put a little paragraph tag that says "You shut off the hover effect!" Now, when the user clicks on this, I'm going to turn off my mouseover mouseleave events and put some HTML content in there.
And we'll close it off with a semicolon, and we'll save. Okay, let's go back to the browser. Now, let's refresh. Okay. So you can see that the hover effect is still there. And now when I click, you can see that now the content says, "You shut off the hover effect!" And now the hover effect is no longer working. So, that's a basic introduction to connecting events to elements using jQuery.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99963 Viewers
56 Video lessons · 113049 Viewers
71 Video lessons · 81894 Viewers
131 Video lessons · 39299 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.