Hello, in this jQuery video, I am going to show you how to actually combine events. So if you have multiple events, and they are, they have the same selector, you can combine them into one little group. And this is pretty cool. So I'm just going to create element, a text area. And yeah, an empty text area in all fairness is fine. I'm happy with that.
So what I'm going to do is I'll add some text in there, one more I will do is, first of all, I'll just select it. So I will do it individually first, just to show you so say text area. And let's say on click, we are going to have a console onClick we're gonna have a console. Console dot log in the console was gonna log Are we in the log text area? Next, we are going to detect when the mouse has entered it. So we're gonna say, Man, enter the spell little and spell for us.
And for death, well, I'm more likely going to do is after you just change the CSS, some Java dot CSS. And I've got a separate set of videos in the series covering on CSS stuff. So feel free to check them out for more information, but just know what we're doing changing the color to red. And I'm mostly going to change it back essentially. So I may need to change that. You could put a hexadecimal value here as long anything that you want Put normally after the colon in here, so you can put it right here, before we load.
And as you can see, it does that and if I click it, it says text text to should say, text, area, text or is clicked. Okay, so that's all right. But what we can do is actually combine it. So to combine it, we like if we just do one selector. If you watch the video on binding or non binding are fantastic. If you haven't, I highly recommend going and checking it.
In that video, I covered binding it with the dot bind function, but I'm going to show you the.on function which essentially works the same way but this is the newer version of doing things. So I recommend using this version, I wanted to show both methods. So what you do is do.on don't do a function. You do these curly braces, which just indicates this group is going to be some cold Yeah. And because this isn't on any particular events and all of these, what we do is we put the event. So the first one is click a colon.
Now after this lovely presentation, after this is where we put out functions, oh, I will copy that. put that there. And I'll indent it. Now we just put, comma, no, enter, colon, same again, for copy that, paste it right here. And there we go. Comments are always per column when you want to put a number event, you could theoretically have this you know, like all on one line like this as well.
We just doesn't look very nice. This is just a lot easier to be able to see what's happening and what the code is doing them the overall flow of it and I You got the little start in politics, man? No, that's all done. Yeah, so Doc, you don't need a comma for the last one you can have it that won't actually prevent it from running. So that's totally up to you, you might want it there. So So the next time you put it, you put another event you know, are there anyone causing the error?
Okay, just to make sure it is definitely working with this new combine multi polar event was very epic multi event. And for the background color, yellow, not checking the back alley via wall tissue. That should be enough to show faces working. As you can see clo white on every click, epic multi event. So that is how you do multiple events using one selector. Really, really useful.
If you have any questions, feel free to pop me a message cuz we covered quite a lot in this tutorial. And as usual, I will Look forward to seeing you in the next video.