1 00:00:01,440 --> 00:00:04,440 Welcome, everyone, to another lecture today we're going to use. 2 00:00:05,970 --> 00:00:13,440 We're going to learn about mouse events and remember the last time when we did use one of the events, 3 00:00:13,440 --> 00:00:16,170 when we add event listener, it was unclick. 4 00:00:16,290 --> 00:00:18,330 So today we're going to discover similar things. 5 00:00:18,700 --> 00:00:21,000 Not there, like a 10 or 15. 6 00:00:21,000 --> 00:00:26,100 I'm not going to go to all of them, but I'm just going to get you familiar with because some of them 7 00:00:26,100 --> 00:00:28,590 do you will never use in some of them. 8 00:00:28,590 --> 00:00:34,660 When you know one, one or two, then you can easily search and find it and see how they doing. 9 00:00:34,760 --> 00:00:36,990 So I don't want to waste your time that much. 10 00:00:37,230 --> 00:00:43,440 So now I do have about five days and you need to have this at five doges here. 11 00:00:43,440 --> 00:00:49,170 I do have four bottom card by car title for BTE and we said that's for battery said. 12 00:00:49,470 --> 00:00:55,200 So these are the variables and maybe we're not going to use them all right now, but we're going to 13 00:00:55,200 --> 00:01:06,930 do is so what we are going to do is that we need to just do a couple of them and we will be fine. 14 00:01:06,930 --> 00:01:12,450 Now for Button is actually the button from the first form that we have. 15 00:01:12,720 --> 00:01:18,780 Remember, we have a form here and I can just shifted to the left and you will be able to see it. 16 00:01:18,780 --> 00:01:20,760 Right now there's no action. 17 00:01:20,760 --> 00:01:25,740 There is a method post, but there is an idea off of this button here. 18 00:01:25,970 --> 00:01:29,820 Now, what we can do, I just going to say document. 19 00:01:30,630 --> 00:01:33,450 I just want to select this query selector. 20 00:01:33,450 --> 00:01:35,670 I'm going to use the simple query selector. 21 00:01:35,670 --> 00:01:37,170 I'm not going to use anything else. 22 00:01:37,380 --> 00:01:41,000 And now we're going to target these air. 23 00:01:41,160 --> 00:01:41,530 Right. 24 00:01:41,700 --> 00:01:44,460 So how are we going to target the IDs with the hash? 25 00:01:44,790 --> 00:01:45,320 Very good. 26 00:01:45,330 --> 00:01:50,640 I do have the form, but now I need to have a card, but I'm just going to select all of them. 27 00:01:51,060 --> 00:01:54,560 And if we don't use them, just please use practice some of it. 28 00:01:54,570 --> 00:01:59,400 So Kabaddi, I think this is the card body class. 29 00:01:59,430 --> 00:02:03,960 And remember, the class is with the IDs, with the hash. 30 00:02:05,040 --> 00:02:07,350 I'm just going to copy one, two more. 31 00:02:07,470 --> 00:02:08,940 So card title. 32 00:02:08,970 --> 00:02:09,570 Very good. 33 00:02:09,600 --> 00:02:13,400 No, I think it was a card title. 34 00:02:13,860 --> 00:02:14,520 Not sure. 35 00:02:14,520 --> 00:02:15,420 That's why I'm checking. 36 00:02:15,420 --> 00:02:16,410 I don't want to make a mistake. 37 00:02:16,410 --> 00:02:22,620 And he on the other side to laugh at me and should change this card title. 38 00:02:23,460 --> 00:02:28,350 Now I'm just some from time to time I'm making jokes, so don't get mad at me. 39 00:02:28,350 --> 00:02:28,710 Right. 40 00:02:28,920 --> 00:02:32,040 You are here to learn and reset. 41 00:02:32,520 --> 00:02:39,750 You can add even here if you want ID, but I'm going to use that reset class so the classes are with 42 00:02:39,750 --> 00:02:42,720 that pretty much we are done with this now. 43 00:02:42,720 --> 00:02:46,530 The first thing that first we going to do to click right. 44 00:02:46,620 --> 00:02:50,240 We already have done this, so I'm going to say form button. 45 00:02:50,430 --> 00:02:55,140 So when it click actually on this one, I'm just going to refresh here, OK? 46 00:02:56,040 --> 00:02:57,090 You didn't have to see this. 47 00:02:59,560 --> 00:03:07,240 And it's giving me some yeah, now it's done, so I was just trying something before right now when 48 00:03:07,240 --> 00:03:13,510 I click on this button, actually it's not Button is I class, but it's we just change it to look to 49 00:03:13,510 --> 00:03:15,960 mimic it here. 50 00:03:16,330 --> 00:03:17,000 Where is it. 51 00:03:17,830 --> 00:03:18,280 Yep. 52 00:03:18,460 --> 00:03:19,040 This one. 53 00:03:19,300 --> 00:03:23,940 Now when we click it actually it should do some action right now. 54 00:03:26,840 --> 00:03:34,070 Let's Annie, that listner here, so an event listener and I will say, OK, click, so you really have 55 00:03:34,070 --> 00:03:38,960 done this in the next part is unnamed function, right? 56 00:03:39,260 --> 00:03:47,390 So these unnamed function semicolon here, don't forget about those so you can pass in the event object 57 00:03:47,660 --> 00:03:54,770 if either prevent or prevent default called this function because you don't want to submit it actually. 58 00:03:54,800 --> 00:03:55,230 Right. 59 00:03:55,250 --> 00:03:58,510 Because that's from the form in here. 60 00:03:58,520 --> 00:04:00,950 I'm just going to say cancel log. 61 00:04:02,150 --> 00:04:02,630 What. 62 00:04:03,800 --> 00:04:06,270 You got time, we just going to get the top. 63 00:04:06,290 --> 00:04:09,730 Now you're going to see what are the types. 64 00:04:09,740 --> 00:04:13,930 I'm going to just refresh you, Spigelman, and go to the council. 65 00:04:14,210 --> 00:04:15,440 By the way, I'm localhost. 66 00:04:15,440 --> 00:04:16,970 Remember, you need to have Zamp. 67 00:04:16,970 --> 00:04:18,650 If you don't use it, it's all good. 68 00:04:19,490 --> 00:04:20,750 Now click right. 69 00:04:20,840 --> 00:04:24,650 If I click it one more time, it's not working. 70 00:04:27,280 --> 00:04:29,360 OK, let's let's test it something else. 71 00:04:29,560 --> 00:04:31,100 Now, this is a four one click. 72 00:04:32,480 --> 00:04:34,330 Now I'm just going to say double click. 73 00:04:35,440 --> 00:04:35,950 Yep. 74 00:04:35,980 --> 00:04:41,160 There is also a double click in here is the I think double double click. 75 00:04:42,160 --> 00:04:45,130 Now, that will fire when you click twice. 76 00:04:45,430 --> 00:04:46,750 So one is one click. 77 00:04:46,750 --> 00:04:48,100 When you click twice, it's twice. 78 00:04:48,100 --> 00:04:49,150 Click when you click one. 79 00:04:49,420 --> 00:04:50,830 Now it's working correctly. 80 00:04:50,860 --> 00:04:51,180 Right. 81 00:04:52,150 --> 00:04:52,530 Good. 82 00:04:52,810 --> 00:04:54,880 Now we have double click in this one. 83 00:04:55,150 --> 00:05:01,390 But what you notice in here that if I do like, I'm going to do one more here, then I'm going to show 84 00:05:01,390 --> 00:05:02,430 you what I want I'm trying to do. 85 00:05:02,590 --> 00:05:04,480 We don't need this function to repeat this function. 86 00:05:04,490 --> 00:05:05,620 This is dry. 87 00:05:05,630 --> 00:05:06,910 Don't repeat yourself. 88 00:05:07,090 --> 00:05:08,530 We are doing that right. 89 00:05:08,530 --> 00:05:11,170 We are using the same function, by the way. 90 00:05:11,440 --> 00:05:16,330 But we do things just on different at different event right now. 91 00:05:16,360 --> 00:05:22,960 I'm just going to say mouse I mouse down in I'm going to use this one. 92 00:05:22,960 --> 00:05:26,460 I'm going to hook it up with the form and reset. 93 00:05:26,470 --> 00:05:26,610 Right. 94 00:05:26,650 --> 00:05:30,220 I'm not going to use it on the same one because it's not healthy. 95 00:05:31,300 --> 00:05:38,740 So mouse down means when you I'm just going to refresh so I shoot shoot fire. 96 00:05:38,950 --> 00:05:42,250 So I should click here and hold it right. 97 00:05:42,340 --> 00:05:44,770 And then this mouse down will fire. 98 00:05:44,770 --> 00:05:49,870 When I, when I release there is another one that's called Mouse. 99 00:05:50,080 --> 00:05:53,690 I think Mouse Up was the second one right now. 100 00:05:53,710 --> 00:05:59,740 I'm just going to copy this one one more time and I'm going to show you what I'm thinking, that we 101 00:05:59,740 --> 00:06:02,880 need to get rid of this function here that we're repeating by ourselves. 102 00:06:03,160 --> 00:06:05,410 Now, the other one was mouse up. 103 00:06:06,910 --> 00:06:10,990 Very good in I'm going to use the same button. 104 00:06:11,590 --> 00:06:13,150 So I'm clicking mouse down. 105 00:06:13,150 --> 00:06:16,510 I'm holding the click on the mouse that is firing up. 106 00:06:16,690 --> 00:06:19,690 I'm releasing any shoot. 107 00:06:20,680 --> 00:06:22,900 It should go straight here, mouse up. 108 00:06:23,200 --> 00:06:23,940 But it didn't. 109 00:06:24,610 --> 00:06:25,150 Why that? 110 00:06:28,020 --> 00:06:29,620 It get there refreshed. 111 00:06:29,640 --> 00:06:35,420 OK, see this, but let's let's put it that she didn't go anywhere. 112 00:06:38,120 --> 00:06:39,960 Right now, nice. 113 00:06:39,980 --> 00:06:43,820 Now it's going to work, so mouse the mouse up. 114 00:06:44,600 --> 00:06:46,360 How cool is this mouse, that mouse up? 115 00:06:47,060 --> 00:06:49,910 So when you release the mouse, that will happen. 116 00:06:50,060 --> 00:06:52,130 So I don't know what's the reason? 117 00:06:52,130 --> 00:06:56,150 Because we are preventing the default, why it's doing this. 118 00:06:56,150 --> 00:07:01,930 But in order see here, I do have that hash symbol that I put in the index. 119 00:07:02,060 --> 00:07:04,120 So just put it in end anyway, right. 120 00:07:05,270 --> 00:07:06,810 It's still trying to submit. 121 00:07:06,830 --> 00:07:08,950 Now, how are we got rid of this function? 122 00:07:09,230 --> 00:07:12,050 So dry means don't repeat 123 00:07:15,140 --> 00:07:16,910 yourself, right? 124 00:07:16,930 --> 00:07:19,310 That's means don't repeat the code. 125 00:07:22,520 --> 00:07:26,380 So so how are we going to fix this? 126 00:07:26,840 --> 00:07:28,930 So I'm going to take one of the functions here. 127 00:07:28,940 --> 00:07:30,800 I'm just going to cut it from here. 128 00:07:31,470 --> 00:07:33,200 Just going to cut it in. 129 00:07:33,830 --> 00:07:37,400 I'm just going to say event tracker. 130 00:07:38,210 --> 00:07:45,140 So this event tracker should be a function and I should put it down here and say, OK, event tracker 131 00:07:45,320 --> 00:07:49,310 and inside I can pass that E and then I'm going to be able to. 132 00:07:49,490 --> 00:07:52,580 So we don't need the actual this function, but we need this part. 133 00:07:52,790 --> 00:07:53,210 Right. 134 00:07:54,950 --> 00:08:04,220 So what we basically did, we from a function, we put a name function and we put it here in let's remove 135 00:08:04,220 --> 00:08:07,370 this mouse down, mouse up and put again, comma. 136 00:08:07,620 --> 00:08:13,920 Don't forget, this is a second thing event tracker and let's figure out if it's working or not. 137 00:08:14,750 --> 00:08:16,370 So I'm just going to hold mouse down. 138 00:08:16,760 --> 00:08:17,330 Mouse up. 139 00:08:17,720 --> 00:08:18,090 Very good. 140 00:08:18,560 --> 00:08:19,750 Now that is working. 141 00:08:20,060 --> 00:08:20,960 Let's fix this one. 142 00:08:23,410 --> 00:08:32,700 And I'm going to say here, even tracker, all right, how cool is this and we don't need it. 143 00:08:32,710 --> 00:08:34,960 So this is how we get rid of that. 144 00:08:35,410 --> 00:08:39,430 Too much coding see from there to there. 145 00:08:39,470 --> 00:08:43,330 Although we can just I'm going to leave you this one like this. 146 00:08:44,620 --> 00:08:53,610 I'm just going to write it down all click with function it. 147 00:08:54,760 --> 00:08:57,670 So we got to see click without 148 00:09:00,130 --> 00:09:01,330 themed function. 149 00:09:03,160 --> 00:09:04,200 So I'm just going to put oops. 150 00:09:04,260 --> 00:09:12,430 So I'm going to copy it here and I put it and I need to uncommented first so I need to get rid. 151 00:09:12,520 --> 00:09:13,210 I do. 152 00:09:13,450 --> 00:09:22,360 I did this one because I want you to have, I don't want to go back to this lecture and trying out what 153 00:09:22,360 --> 00:09:22,950 I have done. 154 00:09:22,960 --> 00:09:26,810 So now you know that we started like this and we end up like this. 155 00:09:26,860 --> 00:09:29,490 OK, let's see if this button is working, by the way. 156 00:09:29,680 --> 00:09:35,190 So click working double click working quick, working this one working miles down, DIMOS up. 157 00:09:35,440 --> 00:09:41,620 How cool is this now there are a lot of same mouse enter mouse leave. 158 00:09:42,340 --> 00:09:45,160 So what we can do we can just copy one of them. 159 00:09:48,860 --> 00:09:59,230 So here, mouse and fur, and this will be mouse enter now you want to enter, not when you're entering 160 00:09:59,240 --> 00:10:00,890 actually the card body, right? 161 00:10:01,490 --> 00:10:05,560 You want to do this because when you enter the body, you want to see something here, right? 162 00:10:05,930 --> 00:10:08,090 The card body, it's not mouse click. 163 00:10:08,090 --> 00:10:11,210 That's mouse leave and mouse enter. 164 00:10:11,240 --> 00:10:12,200 I'm going to copy it here. 165 00:10:12,200 --> 00:10:12,980 I'm going to piece seated. 166 00:10:13,100 --> 00:10:14,510 I'm going to rename it to Mousley. 167 00:10:14,690 --> 00:10:19,250 So I know it's a little bit this confusing, but that's that's pretty much it. 168 00:10:19,280 --> 00:10:20,480 You need to spell it correctly. 169 00:10:20,720 --> 00:10:21,830 Otherwise it's not going to work. 170 00:10:22,280 --> 00:10:25,880 Now, when I enter the card, buddy, here is my answer. 171 00:10:25,880 --> 00:10:26,510 When I leave it. 172 00:10:26,510 --> 00:10:29,740 Mouse, leave, enter, leave, enter, leave. 173 00:10:29,750 --> 00:10:30,440 How cool is this? 174 00:10:30,920 --> 00:10:31,520 Let's see. 175 00:10:31,520 --> 00:10:34,580 Click, double, click, halt. 176 00:10:34,850 --> 00:10:36,070 Mouse, don't mouse up. 177 00:10:36,460 --> 00:10:43,100 A lot of things are working that we have done and so there is mouse out, mouse over. 178 00:10:43,100 --> 00:10:45,350 I'm not going to go through each and every of them. 179 00:10:45,350 --> 00:10:45,650 Right. 180 00:10:46,220 --> 00:10:48,200 There is a one interesting that's called mouse move. 181 00:10:48,200 --> 00:10:49,160 We're going to do that one. 182 00:10:50,120 --> 00:10:53,930 It pretty much we're done for today Mouse. 183 00:10:55,040 --> 00:11:01,640 Now this mouse move is actually going to track the coordinates and it's a very interesting. 184 00:11:02,150 --> 00:11:04,580 So mouse move in. 185 00:11:04,580 --> 00:11:08,840 I want when I'm inside the car start moving. 186 00:11:08,840 --> 00:11:09,140 Right. 187 00:11:09,650 --> 00:11:10,850 I'm just going to refresh here. 188 00:11:11,000 --> 00:11:14,630 So even if I move the cursor here, nothing should happen. 189 00:11:14,630 --> 00:11:14,960 Right? 190 00:11:15,230 --> 00:11:19,970 So if I move if I just shrink it like this, if I go up here, nothing should happen. 191 00:11:20,150 --> 00:11:26,240 But look, when I go down a little bit, bam, mouse enter mouse, move in that mouse, move. 192 00:11:26,360 --> 00:11:32,660 If I go like this here, it's in two hundred and five right now. 193 00:11:32,660 --> 00:11:37,310 I'm just going to zoom in a little bit and I'm going to just go it again here. 194 00:11:37,310 --> 00:11:37,940 Mouse move. 195 00:11:40,350 --> 00:11:45,420 And Miles leave and Miles and they're still working because I'm using the same one, I'm using the same 196 00:11:45,420 --> 00:11:46,350 card body, right. 197 00:11:46,560 --> 00:11:52,920 So if you just just if you don't want to do this, you're just going to comment this part. 198 00:11:53,280 --> 00:11:54,270 Just going to refresh. 199 00:11:54,360 --> 00:11:56,500 So now you're going to have only Mou's move when you enter. 200 00:11:56,760 --> 00:11:59,980 And if you go around, you're going to get. 201 00:12:00,060 --> 00:12:06,480 Now, this is mostly used by some of I don't know, some of the designers, developers of the games. 202 00:12:06,480 --> 00:12:09,870 They use those to track the position of something. 203 00:12:09,870 --> 00:12:10,160 Right. 204 00:12:10,440 --> 00:12:12,890 So if you need it now, you know how to use it. 205 00:12:13,320 --> 00:12:15,790 And I'm pretty much done with this lecture. 206 00:12:15,810 --> 00:12:21,700 So what we have done, we have done mouse events and we have them just a couple of them. 207 00:12:21,720 --> 00:12:26,160 Now, you can comment this two here, and I think he should be happy. 208 00:12:26,170 --> 00:12:30,540 So we have them click Double-Click before we used a function inside. 209 00:12:30,570 --> 00:12:32,080 Now we just think of that function. 210 00:12:32,170 --> 00:12:35,110 We put it down here because that is dry. 211 00:12:35,140 --> 00:12:38,350 Don't repeat yourself, Principal, that you need to take care. 212 00:12:38,370 --> 00:12:43,200 Right now, we create a function called event tracker, and that's pretty much it. 213 00:12:43,380 --> 00:12:46,790 So this is not something special, but I hope it was interesting for you guys. 214 00:12:46,980 --> 00:12:52,290 So if you like, please, if you like the content, please, like share subscribe whatever you're going 215 00:12:52,290 --> 00:12:54,650 to do, leave a five star review and yeah. 216 00:12:54,660 --> 00:12:58,910 Drop, drop a line somewhere saying, OK, hi, this was good or this was bad. 217 00:12:58,920 --> 00:13:01,140 Right now that's pretty much it. 218 00:13:01,600 --> 00:13:03,080 Take care and I'll see you in the next one.