FREELessons: 19Length: 2.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.4 Handling Events With jQuery

Events are probably the most important part of any application that has a graphical user interface—we use them to interact with the user. In this lesson, you'll learn how to use jQuery to listen for and handle events.

5.4 Handling Events With jQuery

Events are probably one of or maybe even the most important thing that you'll learn and use within your applications because they are the primary ways that we interact with the user. And it's not just a JavaScript thing, if you write any application that have a user interface, you're going to be working with events, So an event is something that occurs within our application and a lot of times it's caused by the user doing something like moving their mouse over the page or over certain elements within the page or clicking the mouse button or typing into a form field. All of this things can cause an event to occur and we can listen for these events and whenever they occur, then we can execute some code. So for example, we have a quote and quote menu here, home, and about and of course, these don't go anywhere. The href attribute is set just to a hashtag, but these are something that a user would normally click on and so we can listen for the click event on these links and then we can execute some code whenever that occurs. So let's look at how we can do that. So we'll first of all select our elements. Now we can set up event listeners for one or multiple elements. If we wanted to select all of the P elements, and then it set up a click event listener for all of those elements. We can do that very easily by just using the P selector, calling the on method and then specifying the event that we want it to listen for, and that is click in this case. So we are listening for the click event, if we wanted to listen for whenever the user moves their mouse over a P element we would call or listen for the mouse over event. But in our case we just want to click event and then we would have a function that would then execute whenever that event occurred. So for our home link we need to be able to select that element. And right now there's really nothing that separates or differentiates the home and about links. So let's just add an ID here because it kind of make sense for these things to have ID's so we'll start with the whole link where we'll have just an ID of home link. And so for our selector we will use the ID selector of home link. And then let's just have an alert box that says you clicked on the home link. So nothing very useful but we can at least see what happens. So whenever we go back to browser and refresh the page. Whenever we click on the Home link. There we see our alert message. Now notice in the navigation bar nothing has happened yet but whenever I click on the okay button the browser is going to navigate well it's not really navigating but in this case it is going to the hash URL. It's staying on this same page but if we had some other file, let's change it to home HTML. Now of course this file doesn't exist and that's okay. But if we refresh the page, and then we click on Home, we're going to see our alert box. But whenever we click on OK the browser is going to navigate to Home HTML. And a lot of times we don't want that behavior. We want to prevent the default action of clicking on a link and we can do that inside of our event listener. So whenever an event occurs the browser creates what is called an event object. This object contains all the information about the event that took place and we can call this object to anything we want but the convention is to just call it E and the browser is going to pass that event object to our function. So that we can then use it inside of our function and we're not going to spend a whole lot of time talking about the event object in this lesson we'll save that for whenever we talk about the event model for the standard DOM. But, in this case, what we want to do is we want to prevent the default action of clicking on a link. So, our event object has a method called preventDefault. And that's exactly what it does. So the default action of clicking on a link, is that the browser navigates to whatever is specified within the href attribute. If this was a button for a form, the default action would be submitting that form. So the prevent default method would prevent that from happening, we would click on the button but nothing would happen. At least as far as submitting the form is concerned. So if we go back to our page, let's refresh. Whenever we click on the home link, we still see our alert box. Now the browser does not navigate to home.html and this is just my personal preference but the first thing I ever do is I prevent the default if that is what I want to do. That way I have prevented the default from the get go. If there is any error that I didn't take into account or I didn't plan on occurring inside of our function and the prevent default was at the bottom of the function, well then the default action would not be prevented. So this is the first thing that I typically do with an event list listener if it is something that I want to do. So instead of displaying an alert box, let's just use some of the code that we already have here. Like for example we are toggling the class of important texts on main content. So we can say that for every time we click on the home link, we're going to be toggling our important text class on the main content. So if we click on home, we toggle it off if we click on it again, we toggle it on and we can keep clicking on this all day and we are going to see the same results. But let's also do this, let's set up an event listener for the about link. Let's give this an ID of about link and to start off we can copy what we wrote for our home link and we can just make a few changes. So for the about link, whenever we click on it. Let's add a new P element to our main content. So let's copy this code, and we're not going to do all of this addClass, removeClass and so on and so forth, but we are going to append some content. But instead of saying this was added dynamically with jQuery, let's say that this was added dynamically within click event listener. So now let's go back to the browser. Let's refresh. We of course can toggle on and off the important text class, but now let's add a new content. Every time we click on the About link it's going to add a new p element to our main content. Now when it comes to events, there are many that we can listen for. Click is probably the most common, there is mouse over for whenever the user moves their mouse over a particular element. There's mouse out that occurs whenever the user moves their mouse off of that element. And not to confuse the issue, but there's a mouse enter and a mouse leave. Those are somewhat similar to mouse over and mouse out, there's just a little difference in behavior. There's also events for pressing keys on the keyboard. So there's a keypress event. A keydown which is whenever you press and hold the key, well you're not really holding it. But anytime you press down on the key, that is the keydown event. Whenever you release the key, that is the keyup event. And the keypress event that I mentioned just a few moments ago is the combination of the two whenever you press and release the key, that is the key press but it's not just users that can cause an event to occur. There are things that happen within the document that can cause an event to occur like for example whenever the browser completely loads the page well there is a event called load that you could listen for and then you could execute whatever code that you needed to whenever the load event occurs. And you can also write your own events. Now that's something that is quite more advanced than what we are going to talk about but you could write your own event system. And listen for your own events. Or if you're using bootstrap, many of their components have events that you can listen for as well. So events are extremely, extremely important, and they're also relatively easy to understand. Something happens, you listen for that something to happen, and then you execute code. A lot of the things we do in our applications are based on events.

Back to the top