Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Skill Level Intermediate
So I'm going to uncomment a portion of this. There are many different events that you might respond to or listen for. There's click events, key up events for when somebody's typing in a field, change events for when the value of a field changes. And JQuery makes it easy to respond to all of them, using the On method. So the way this works is I select my element that I want to listen for an event. And then I use On and pass it a couple of arguments. First is the name of the event that I want it to listen for. In this case we're going to listen for a click on this name field. And then I give it a handler function.
So there's a lot of different ways that you can phrase your event handlers in jQuery. I can use On with a named function. I can also take this function, and instead of making it a named function, I can turn it into an anonymous function, copy the whole thing and replace that name click like this. And if I'm just adding one function for this one event handler and I'm not reusing it. This is a nice way to keep things a little more compact. Also, instead of using On, jQuery offers dedicated methods for pretty much every major event type. So instead of using On click like this, I could just use click and then pass it the event handler directly.
And then I'm using the jQuery selector around this to give me the ability to do jQuery stuff to this. So if I uncomment this next line I'm now taking this and setting its background color. So I've saved this file, go back over hear and re-load. And there we go. I clicked the field, I get my message and the field turns pink. So this is probably the best way to work with something using more jQuery inside of your event handler. I want to show you a couple of other kinds of events that we've already mentioned but you haven't seen in action. So I can change this click event to key up and I'll change the message so it says you typed in the name field.
Get rid of everything else and save it. Now every time I type something a message gets logged. If you want to respond to keys in a text field, like if you were implementing a number of character counter or something like that somewhere on your page, this is the event that you would listen for. Likewise if I want to respond when the value of something changes, I can use the change event. Save this, reload, hey hey hey. Tab away from the field and that fires the change event on that name field. And so of course there are many, many events available to respond to. These are just a few of the most common ones. And then one more thing I'd like to mention is the submit event. This is something that every forum has.
And in this case I'm listening for the submit event and here's my anonymous function that handles that event. To which I'm passing this argument event. When you listen for an event, you can pass in an argument. You can it anything you want. Some people will just call it E, but whatever it is, it refers to the triggered event. And then you can use this method called, prevent default on that event. Which stops any default actions from happening. So if I comment this out and we just let this thing submit normally and reload, we go to the submission page.
And I'll go back, but now if I activate this prevent default and reload, when I submit this form nothing happens. And sometimes you'll want to do that if you're working with form validation or the like. So that's an overview of some of the different events that are in jQuery and how you can start to respond to them.