Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Jquery 3
  • Overview
  • Transcript

3.1 Events

We can also add or remove HTML elements to the page with jQuery. In this lesson, I'll show you the methods that the jQuery library exposes for adding and removing elements.

3.1 Events

One of the most important things that we do in our web page is listen for events because that is when we typically execute our code. And jQuery gives us a variety of ways that we can set up event listeners. And we're going to start with something simple. We're going to add a click event for each one of these p elements. And all we are going to do is just display a message in the alert box. So the first thing we want to do is select our elements using the dollar function. And then, we're going to call a method something called click. And we pass in the function that we want to execute whenever the click event fires on these elements. So here, we're simply going to alert, the paragraph was clicked. And if we hop on over to the browser, we're going to see those results. If you click on any one of these paragraphs, you will see the alert box pop up. Now, there's a caveat here. The elements that you select are only the elements that are going to have the event listener. So this means that these three paragraph elements are now listening for the click event. However, if we come down here and if we add a fourth paragraph will save Paragraph Four. This is not going to get the click event listener because by the time that this code executes, there's only three paragraph elements. So, whenever you use the click method, only the elements that are selected with this selector is going to have that click event listener. So let's save this, let's go back to the browser. If I click on Paragraph Four nothing happens. But if I click on Paragraph Three, Two or One then we have the alert box. Now, this is the simplest way of setting up an event listener, any of these standard events you can use as a method. So if you want to listen for the double click event. That's dblclick. If you want to listen for mouse enter or mouse leave. Those methods are mouseenter and mouse leave. Basically, you can take your standard events name and use that as the method name. But there's another way that you can set up an event listener, and that's with a method called on. So let me comment this code out and we will look at what the on method looks like. So let's select our p elements once again. We're going to call the on method, you know like, onclick and onmouseenter and so on and so forth. And then, we can use this method in a variety of different ways. The first, is to pass a string as the first argument. This is the event that we want to listen for, and then we can pass in the function that we want to execute. So let's do the exact same thing that we did before, but it's going to be done using the on method, as opposed to the click method. And hopping over to the browser, we see the same results. Now, the reason why you would want to use the on method is because there are many other options that we can choose from. We can set up multiple event listeners for whatever elements we have selected by instead of passing a string, passing in an object. So let's look at what that looks like, in fact, I'm going to comment this out and will use this as a basis for our new code. So instead of just listening for the click event, we're going to pass in an object. This object is going to have properties that have names of the events that we want to listen for. So click, in this case, is going to be a function. And then, we will simply alert our message to the document. But no, let's not do that. Let's modify our content within these elements. So to do that we can use the standard Dom API, if we want to but we can also use jQuery. Now, we want to get to the element that received the event or the event target. So to do that we just say e.target. Now, I don't want to say that this isn't important because it is. But jQuery normalizes the event API so that it mirrors the standard events model. So if for some reason you need to support IE8 or heaven forbid anything lower than that, then you don't have to worry about using the IE event model or at least the API that the IE event model gives you. Instead, you can write standards based code and for the most part you will be fine. Now, IE9 and above support the standard event model so that's why I say it's not very important. Hopefully, you won't have to support IE8, but just in case, you know that e.target is what you would use as opposed to e.srcElement. Okay, so we are getting our event target, we are passing it through the dollar sign, so that we are wrapping that element as a jQuery object. And then, we're going to append some content. And let's just say that you clicked the element. So every time that we click on these paragraph elements, it's going to add that contents but let's also listen for the mouseenter event. So all we are doing is adding another property to this object that we are passing to the on method. And this property is going to have a function as its value and will come to do the same thing except that instead of saying you clicked, we'll say that you entered the element. So, if we hop back over to the browser, whenever we move our mouse over, and that's going to get really ugly really fast. But you see what's going on here. Anytime we enter the element, we see that content being added. And if we click on these, we see that content being added to the element as well. But once again, if we do anything to Paragraph Four nothing is happening. So let's fix that and we can using events delegation. Now, if you're not familiar with event delegation it's kind of simple. There are some kind of complex things going on behind the scenes, but basically it's this. With the event delegation, we want to set our events listeners for click and mouseenter higher up in the document tree. Basically, we want to go to the parent element of all of the p elements. Now, if we want to apply the click and mouse event listeners to all of the p elements. The only container that is going to work is the document. So we want to pass document to our dollar sign function that's going to take our document object wrap it in a jQuery object. So that we can then use the jQuery API. Now, this isn't the only thing that we need to do because right now these events are going to fire on everything. So if we click on a p element, we are going to see you clicked the elements. But if we click on anything else in the document, we're going to see that same message being added to whatever we clicked on. So, basically, we want to say that we want these events to fire only on the elements that we specify. And that's not technically true but basically that's essentially what we are doing. We are going to say that we want only the p elements to have the click and mouseenter event. So, we save this. We go back to the browser. Whenever we enter into the paragraphs, we see our entered message. Whenever we click, we see the click message as well. So this second argument that we pass is just another CSS selector. P is rather simple but if we wanted this to execute only on p elements that have a class of foo then that would be our selector. Now, the on method can also be used to use event delegation on a single event. This is setting up multiple event listeners,what if we just have one? Well, it's kind of like what we did up here. Let's just copy this code. We'll uncomment it but we will need to make some modifications. The first is, we want to change the selector for the dollar function so that needs to be document as well. And then, we need to add another argument here. The first is still going to be the event's name but the second is going to be our selector that we want to filter to and then the third is the function that we want to execute. So, if we go back to the browser. Let's click on Paragraph One. We see the clicked message being added to elements and we also have the alert box displaying. And this is also going to execute for Paragraph Four. And any paragraph that we add to the document is going to have the same functionality because that is what events delegation gives us. It doesn't matter if we add it literally in the HTML or if we do so dynamically through JavaScript. Any p element in the document is now going to listen for two click events and one mouse enter event. So now, you know how to set up event listeners with jQuery. If you'll need just a simple event listener for standard DOM events, then you can use that events name as a method. Just call the click method, mouseenter, mouseleave, mouseover, so on and so forth. Pass in a function and you're listening for those events. But then, you have the on method which gives you much more flexibility and also the ability to use events delegation.

Back to the top
Continue watching with Elements