jQuery Crash Course [2] - Events

all right guys so what I've done is just cleared everything out I kept the UI so we still have the header and the container and all that so now we're going to move on to events so I'm going to go down into the container and I'm going to put a heading and we're going to first discuss most events all right so let's create a button okay we'll say button we'll give it an ID of BTN one and that's it for now we'll say button one all right and let's just let's create another one as well create button to that alright so let's go down to our script tags and I want to add a click event on button 1 so what we can do is we're going to use our selector which we learned about in the last part and we know that it has an ID of button 1 so we can use number sign BTN 1 and then we're going to say dot click and then inside this click we need to put in a self calling function ok now and here is what we want to happen when the button is clicked so let's do alert and we'll just say button clicked so let's save that and reload if I click it we get button clicked now before we move on there is one thing I want to address and that is that sometimes people they like to put their JavaScript in the head okay I prefer it down here in the body at the end but if I were to move this up here like that and we reload and I click button 1 nothing happens the reason for that is it's trying to grab button 1 before it actually loads on the page all right so what we can do to prevent this from not working is use document dot ready which you've probably seen before so what that is is we're going to take our jQuery and we're going to say the whole document dot ready meaning so when it's ready then we're going to run this function okay and then what we want to do is just take any of our jQuery and put it inside that okay so what it's saying is don't run any of this code until the documents ready till it's loaded so now if we go and reload and now I click button one it works alright and even if you're going to put your JavaScript and jQuery down at the bottom it's still a good idea to have this so I'm going to move it back but I'm going to keep that document ready okay I probably should have mentioned that in the last part but better late than never okay so anyways button dot click we run a function now behind the scenes this actually runs what's called the on method alright I'm just going to give an example of that so if we say BTN one dot on and then that's going to take two parameters it's going to take the event we want which is click and then it'll take that function okay so if I go ahead and grab that and then let's comment this out and we reload click it and it works in the same way okay so you can use this dot on if you want or you can use the shorthand and just use the actual event alright some people say that doing it this way does save a couple milliseconds but it's not really a big deal now a lot of times you'll want to have an event that when fired it does something to another element on the page somewhere so what I'm going to do is under the button here let's put a paragraph and I'll just give it a class of para one all right and I'm just going to grab some text here this is actually from the jQuery site and what I want to do is when I click button one let's save this first of all when click button one I want this to disappear to hide so from what we've learned already probably know how to do that so we'll take our event will say button one on click and then what we can do is grab power to and say dot hide ok so now if we want to reload and that's not working button one on click power - oh it's power one ok and it makes it hide and then what we could do is take button 2 so if we take button to here and say on click and then we'll change hide here to show so now click that it hides click that it shows all right now in a lot of cases you might want to have the same button be able to basically toggle back and forth so for that we can use the toggle method so I'm going to change this right here comment that out and we'll say power 1 dot toggle so now if we reload and I click that and then click it again it's going to go back and forth alright now let's talk about some of the other events oK we've just covered click up to this point so let's comment these out and then we're going to take let's take button 1 and we're going to say dot dbl click for double click and then put our function and let's just toggle paragraph 1 okay so now if I reload if I click once nothing happens if we double click then it toggles okay pretty simple now the next one I want to look at is hover so I'm going to copy that and we're going to change this to hover okay now if I go in it goes away if I leave it comes back now what's interesting about hover is it's not an actual event this is just the shorthand but you'll see if we were to use on just copy this if we were just say button one dot on hover and we'll do the toggle okay let's comment these Oh okay so we have on hover now when I enter it nothing happens because it's not a real event it's just a shorthand syntax for two other events okay which is mouse enter and mouse leave all right so you'll see if I change this to Mouse enter it goes away now when I leave it doesn't it has to go enter again to toggle what hover does is it combines that along with most leaves so now if I go mouse leave and reload go in goes away leave comes back okay so that's what this hover does the shorthand syntax takes both of these and applies that functionality all right we also have mouse move which is pretty cool so what I'm going to just comment this out and we'll go ahead and take that and let's change this to Mouse move and now if I go into the element and then I start to move you'll see that it toggles if I move once it comes back move again goes away and it just kind of keeps doing that and we're going to work with that more later on so let's comment that and then the next two that I want to show you is Mouse up and most down so if we say button one on Mouse up hey I'll just do that actually I'm sorry let's - most down first okay so if I go and I hold the mouse down it goes away okay when I let go it doesn't come back it's waiting for us to do most down again but what we can do is combine that with most up so if we go ahead and we say Mouse up toggle now if I click down it goes away and I release it comes back okay down it goes away release comes back so that's how mouse up and Mouse down work so those are most events now I want to show you that we can pass an optional parameter for the event so for instance let's let's take a click event which I'll just grab up here copy that okay so we have this button one click and what we're going to do is pass in an e parameter here and then let's do a console dot log e to see what that gives us okay make sure you have your console open down here just click f12 and it should open and then we'll reload and I'll click this and now every time I click it you can see we get this mouse we get this event which has a ton of stuff okay most of it is useless to us at least but it gives you a bunch of stuff so basically every event has its own little database with a bunch of data all right so if we look at current target right here we open that up it's going to give us some information such as the class name which it doesn't have one but if it did we could access that we can access the ID which is BTN one we can get the inner HTML the inner text so there's a lot of things we can get here so let's see it let's examine the ID so we can say console.log dot what is it current target dot ID okay so we'll click that I will save that and let's actually do an alert instead of a console log so now click it and we get an alert that says BTN 1 ok so it gives us the ID if we want to get the actual inner HTML we can do that as well so we'll say e dot current target dot inner HTML and then I'm just going to comment that out and it gives us button 1 ok let's copy that and we can also get the outer HTML which will basically include all the tags and stuff ah let's see undefined I put a uppercase ho and now you can see we get the actual button tag and all that stuff ok now if we wanted to add a class let's say for our first button here we'll say class equals BTN class alright and down here change that to BTN I'm sorry nup you want to change it to class name now if we click that we get button class all right so there's a lot of things you could do with being able to access all the all these values so before we move on to forum events I just want to show you something pretty cool that we can do with mousemove so let's grab this right here this mouse move and we'll go down here and let's pass in that E and then we're going to say console dot log and in here let's say chords and this will be the Y chord which we can get let's concatenate on e dot client Y alright and then we're going to concatenate and say X and that will be client or e e dot client X and that should give us the coordinates of that button when we mouse move so you can see down on the console it's changing as we move ok if you want to not use the button we could actually use the whole document reload and now anywhere on the document it's going to give us our position okay now if we want to bring that into the browser we could do that as well so if we put right here we'll put h1 and we'll give it an ID of let's give it an idea of chords and then down here instead of console.log we'll get that chords ID and we'll say dot append and then reload maybe we'll do append actually adds it so it keeps adding to the last one so let's do HTML which will replace it so now as I move you can see our exact mouse coordinates which is pretty cool and this HTML we're going to get into that in the dom manipulation section so don't worry about that just wanted to show you that we could in fact do that and you can imagine this could be good for very interactive applications that use animation and stuff like that so let's now move on to form events okay so let's see we're going to put in let's just put in a horizontal rule and then we'll put in a form and just to save some time I'm going to paste in the inputs okay so we have a label with name input ideas name the name attribute we don't really need but I just put it there anyway and then we have the email and then we have a gender which is a select box so let's save that reload and we get our select box all right I'm going to get rid of that chords for now because it's kind of distracting okay so now let's go down here and we're going to comment out the rest of this stuff for now and let's look at the focus event okay now focus is when you click into an input that's setting off focus so let's take I will just say input so all the inputs dot focus and in here we'll pass in a function and let's just to alert focus okay so now if I reload and I click in here we get an alert that says focus now one common thing that I see a lot is when you click enough a field it'll change the color or add a border so that you know that you're in that field so we'll comment that out and then let's say ID what do we have for IDs I think we have name so say input ID name dot CSS and in here we'll say background and we'll set that to pink all right let's save that and now if I click in it you'll see it's pink now the way we did this is not ideal because even if I click an email that turns pink and this is a perfect case for this okay using the keyword this which means whatever event whatever element you're currently in so in this case whatever input we're in so we can just remove that and say this dot CSS okay so now if I click in there click in there okay so it'll it'll pertain to whatever one you click in now notice that when we click out it doesn't go back so we can handle that very easily with the blur event blur is the opposite of focus that's when you click outside of the box all right so let's copy this and we'll say turn this to blur and then we'll change background to the background of the of the body which I believe is that actually no we'll make it white so now click in click out and you can see that it's working correctly so that's an example of focus and blur now we also have a key up and key down event okay so basically when you push a key in or when you release it when it goes up so I am going to actually we'll just keep that that's fine but then we're going to add another I'm going to say input and then we're going to do dot key up and inside here have a function and let's see we'll do console dot log key up okay now if I go and click and I start to type you'll see that key up keeps logging down here now what if we want to get the the actual data that we're typing in we can do that by passing in E and then we'll change this to console log e dot target dot value so now if I start to type you'll see that it's going to give us whatever we're typing in alright in the next event I want to look at its change and we can actually pertain this to select so we have a select here with the ID of gender so let's go ahead and bring this comment down to here and then we're going to say we want input with the ID of gender and then we're going to say dot change and in here we'll be function and we're going to alert changed okay we'll save that and now if we go ahead and change the female that didn't work let's see oh I put input should be select there we go so you can have something happen when a user chooses a specific value and we should also be able to get that value if we pass in E and then we get e dot target dot value okay so female and we get female okay now I just want to show you the submit event so if we want to submit a form right now up to this point we've been dealing with separate input so now we're going to deal with the form itself so we'll take that form which I think has an ID it doesn't so we'll just say ID equals form and then we'll go ID form dot submit okay now if we were to console dot log submitted whoops can't type today so let's try that and see what happens and fill in whatever we want and submit I guess that has to be an email address you know what let's change that type to text just so we don't have to deal with that okay right now it's email all right so just type anything in submit and you'll see that we're not seeing the console log down here that's because the form is actually submitting what we need to do to stop it is pass in E and then we'll say e dot prevent default okay save that and now submit and you can see we get our submitted and if we want to grab the value here let's say we want to grab the value of name then let's actually we'll create a variable called name we'll set it to that input which is input with the ID of name and then we want to get dot Val that'll give us the value all right and then we'll console.log name so for name we'll just say John Doe and submit and we get John Doe so we could proceed to do whatever we want with these inputs all right so this video is getting quite long so what I'm going to do is stop it here we've went over all the basic selectors events now we're going to move on to Dom manipulation which will continue in the next video

Channel: Traversy Media

Views: 148,425

Keywords: jquery, jquery events, javascript events

Id: VlWsJHsVb-E

Length: 24min 19sec (1459 seconds)

Published: Sun Sep 18 2016