jQuery Event Methods [#5] Ultimate Web Developer Course (Free Tutorial)

jQuery Event Methods [#5] Ultimate Web Developer Course (Free Tutorial)



hello my friends I'm going to talk to you a little bit about jQuery event methods now event methods are used to create further manipulation of the Dom by attaching a function to an event handler and that probably sounded too jargony so why don't we speak in normal human language a user interacts with the browser by clicking or hovering over something and those are called events jQuery can recognize an event and then do something with it so for example I'm going to show you here I created an event HTML page here it's very basic go ahead and pause the video and copy this out or just pull it straight from the the course files folder that you downloaded at the beginning of this section because there's no need for you to be messing around with HTML this is all about jQuery so here we have some HTML here make sure you got this right stuff you got the box and your the form with the element and and then I have some CSS in there that I've added as well at the bottom again just copy from the Downloads folder because this is not the CSS section anyway now in our script JSA jas I'm going to show you just to kind of a few examples here so this what I'm going to code here is called the click method and it attaches a click event to the ID of box so here a selected box and then click that is called the click method this code standalone won't do anything because you're just attaching a click event so it's when you add a function to the click event that something cool can happen so let me show you in here we would write function then open closing parenthesis open curly brace couple returns closing curly brace that's the syntax right there that's where the magic can happen and then in here it's where you can do something so I'm just gonna say alert foe the alert function there you just clicked the box and make sure that is in strings save that and just check it out in your browser here so here we have the little Paige if I click the box I get an alert that says you just clicked the box great so that's that's how you would do the click event method and then perform something within the function so it's in the function that you can manipulate the Dom change CSS update text add or remove add and remove elements on the fly and that's what makes jQuery so cool there are a bunch of event methods some of which you'll use regularly with every website and some of which you may never realize existed until you teach a course about jQuery and actually read through the jQuery documentation for the first time did I say that out loud now the entire list can be found at w3schools comm and API jQuery comm and I'll attach those to a to the lecture here as a resource but but we'll go through a few more of the most common event methods here in this lecture in the meantime so let me show you here this is another one and it's called the blur method so the blur method looks like this I'm just gonna put input and then blur so it attaches a function to the blur event so the blur event is when an element loses its focus so when an input in this case loses its focus that's what more specifically would have the blur event you can't really blur off of a div but you can blur out of an input because when you click in an input like so that's called focus and when you click out that's called blur so just so you know so when you blur out of an input it basically means it loses its focus and so this blur recognizes that event and then you could do something with that so this example that I'll code here would recognize the blur event check to see if the input is empty then tell the user that they forgot to enter text in the input silly user so this is how you do that function again as your syntax so you got your blur function and here is where we're going to do some magic it's this is gonna be just a little bit more advanced just to show you the power of it so we're gonna do an if statement so in here we're going to check to see if so this this is the this selector basically instead of putting an element in here like an input or a div or an ID or class you can actually just say this without a string and it basically just means what you're actually already working with in so the input is when you blow to the input it's going to check this meaning this thing right here the input so you don't have to re define the input and and specifically you wouldn't want to do that because if I were to say input here and check to see if the input is empty then it's going to check to see if all inputs are empty and that's gonna cause some major issues we want to see if this specific input is empty so any input when you blow out of any input attach the blur event method and then in here we're gonna check to see if this specific input the value so dot Val like so is equal to empty string so this checks if this specific input is empty then do this stuff in here so more jQuery so we're gonna say this dot CSS so we're changing just the specific element we're gonna say border:solid 1px alar read and we'll also select the box and say text we're gonna change the text to forgot to add text question mark and then that would be it so now basically we're gonna blur out of an input it's gonna check to see if the value is empty and if so it's going to give a boarder to that input to indicate that hey you missed something and the box is gonna give you some feedback with the text so check it out so here we have our website or web page I'm gonna focus in nothing happens yet now I'm gonna focus out forgot to add text red border pretty neat hey so that is how you would use the blur event method now another example we can use to remove the border if the user finally enters text into the input is called well we can use there's a few different ones but the one of them is called the key down method and it attaches a function to when the user presses a key down within an input and so that looks like this so we're gonna select that input again we're gonna say key down and here we do the function again same deal and in here is where we're going to do some magic if so we got our if statement I'm going to check this again this val is not equal to empty so this means is no longer equal to an empty string then do this to following this about CSS border:solid 1px already our story not read I will say seven seven seven and we'll change the text in the box to something else that indicates you enter text thanks for that okay now let's check it out I'm gonna save that refresh so here we go we're gonna click in or focus and then blur forgot to add text red border woops yep I did let's start entering text thanks for that and it is now a gray border far to remove it blur same deal forgot to add text thanks for that see so just like kind of some validation it's something that you can actually use today on one of your websites if you have a forum or something like that you want people to be able to enter text and if there have that the forum is empty you want to give them feedback to say hey you forgot something and so that is how you would you'd use those specific event methods another very popular event method is the hover it's the most popular in my experience because I find it incredibly useful basically the hover method is attached to a hover event and then you can perform a function again like so so I'll show you another example we got we're gonna so we're gonna select that box and we're gonna hover again we need a function cuz just a hover alone is not gonna give us anything good so we got hover and all we're gonna do now is just say this text and we're just gonna change the text in side the Box you hovered save that let's give it a check see hover inside you hovered there we go now the cool thing about hover methods is that it attaches to event handlers a hover in and a hover out if you only use one like in this case just the single hover event method then it just performs the function you asked of it once it combines both of them and it just does the one thing but you can specify what they do in both specific events by simply adding another function to this hover event method and all you need to do is after this curly brace after this first function give it a little space comma right after it and then function again open and closing parentheses open curly brace couple returns closing curly brace so you can see here we have the first function this is the hover in and then comma second function that's the hover out and then we could just make it do things in those specific cases so I'll say you hovered in and you hovered out save that let's check it out you hovered in you hovered out you have it in now you know you know see pretty cool anyway those are just a few of the most common event methods and like I said there are many of them and you can give them a look-see and test them out at w3c and jQuery comm and I do encourage you to do that you can go through here and just kind of give them a little look and click click them and check them out read read up on them if you want to do that and in my experience basically I just start coding now I don't know all the event methods by heart but I'll be coding a site and then I'll come across a scenario where I'll think hmm it'd actually be really cool this thing could do that when the user performs this then I'll do a quick search within the jQuery Docs to find out if there's a method for that and more often than not it turns out to be the case so googling is your friend cheers and I'll see in the next lecture

Related Posts

3 EASY TO SELL Services For A Digital Marketing Agency – SMMA 2019

8 Replies to “jQuery Event Methods [#5] Ultimate Web Developer Course (Free Tutorial)”

  1. it's nice to see content which I paid for in udemy being shared freely and costlessly. Going to rate 1 star there right away!

  2. Awesome, I don't know how you do to explain everything in a fun and easy way to understand, thank you so much for this lessons.

Leave a Reply

Your email address will not be published. Required fields are marked *