1 00:00:01,800 --> 00:00:02,820 Welcome back, my friends. 2 00:00:02,840 --> 00:00:07,710 Welcome to another lecturer's show today where we are going to talk is going to talk about event listeners 3 00:00:08,190 --> 00:00:11,400 and we can associate event listeners to anything we want. 4 00:00:11,680 --> 00:00:16,330 But usually in our program, we do associate with buttons or when we click something. 5 00:00:16,610 --> 00:00:21,150 Right now, the first thing is to find out what we're going to start. 6 00:00:21,180 --> 00:00:23,000 We've got to start with this button reset here. 7 00:00:23,010 --> 00:00:25,110 So I'm just going to open it, inspect the element. 8 00:00:25,650 --> 00:00:27,950 And I do have this FFA. 9 00:00:28,500 --> 00:00:33,540 So it's a traveling week, but it doesn't go anywhere. 10 00:00:34,410 --> 00:00:35,820 Now, I'm going to show you one thing. 11 00:00:36,450 --> 00:00:39,890 She's going to remove this from here and save it, refresh it once. 12 00:00:40,410 --> 00:00:47,370 So don't don't want to have anything in my traveling, traveling now, I've created app for games and 13 00:00:47,370 --> 00:00:49,540 you should create one and link it here. 14 00:00:49,590 --> 00:00:50,350 How cool is this? 15 00:00:50,550 --> 00:00:51,720 Now let's start. 16 00:00:52,230 --> 00:00:57,290 So first I want to select this little reset. 17 00:00:57,450 --> 00:01:01,800 So I'm going to do this documentary query selector in here. 18 00:01:01,800 --> 00:01:04,500 I'm going to say, OK, Dot begin select. 19 00:01:05,040 --> 00:01:06,230 No, it was preset. 20 00:01:06,240 --> 00:01:06,590 Sorry. 21 00:01:07,920 --> 00:01:11,920 Now I do so like this one with Dot because that is the class name, right. 22 00:01:12,330 --> 00:01:16,440 If there is what I do here, it would, it would be different with a hash. 23 00:01:16,800 --> 00:01:24,330 Now I want to associate element listener here and I want that the first part, it takes two parts. 24 00:01:24,330 --> 00:01:28,680 The first part is actually what we are going to do. 25 00:01:28,960 --> 00:01:31,200 So it's the event that we are listening for. 26 00:01:31,200 --> 00:01:32,720 And that event is click. 27 00:01:33,210 --> 00:01:33,960 How cool is this? 28 00:01:34,110 --> 00:01:35,260 The second part is a function. 29 00:01:36,300 --> 00:01:37,700 This is a name function. 30 00:01:37,710 --> 00:01:40,680 You will learn a lot of about these things we need to close. 31 00:01:40,680 --> 00:01:42,720 It is called single in there. 32 00:01:43,260 --> 00:01:47,430 Now this is a name function, doesn't this callback function doesn't have any name. 33 00:01:47,430 --> 00:01:47,750 Right. 34 00:01:48,150 --> 00:01:51,790 So you're going to see I'm going to show you a little bit different. 35 00:01:52,260 --> 00:02:01,200 Now I'm going to say, OK, I'll learn and I'm going to say, oops, give me a reset button. 36 00:02:02,310 --> 00:02:06,060 Here is button is short for any shortfall button. 37 00:02:06,420 --> 00:02:08,850 Click right now. 38 00:02:08,850 --> 00:02:10,550 Let's test it out if it's going to work. 39 00:02:11,640 --> 00:02:14,940 So when I click here, here is the reset button is clicked. 40 00:02:15,210 --> 00:02:19,790 So we associate event listener to this button when we click. 41 00:02:19,800 --> 00:02:25,140 So that's the event in the function is actually we can do whatever we want here, whatever we think 42 00:02:25,140 --> 00:02:27,660 that is necessary to do, we do it here. 43 00:02:28,000 --> 00:02:31,410 OK, now we can achieve the same thing. 44 00:02:31,410 --> 00:02:32,370 We can do a lot. 45 00:02:33,150 --> 00:02:35,790 And I'm going to say I'm going to copy the same thing. 46 00:02:36,690 --> 00:02:42,990 I'm going to put it here and I'm going to show you some things that you need to understand. 47 00:02:43,900 --> 00:02:46,200 I'm just going to refresh here, OK? 48 00:02:46,220 --> 00:02:46,800 Reason. 49 00:02:47,040 --> 00:02:47,730 Very good. 50 00:02:48,180 --> 00:02:48,750 Where is it? 51 00:02:49,920 --> 00:02:52,320 And I'm going to come along and see what's happening. 52 00:02:52,740 --> 00:02:54,210 See, it's submitting this one. 53 00:02:54,570 --> 00:03:00,060 So all of the forms, all the links, their job is to submit somewhere because I don't have anywhere 54 00:03:00,060 --> 00:03:00,600 to go. 55 00:03:00,750 --> 00:03:02,850 It's submitting to the same same page. 56 00:03:02,850 --> 00:03:03,140 Right. 57 00:03:03,390 --> 00:03:05,040 That's why it's refreshing, this one. 58 00:03:05,640 --> 00:03:08,460 And that's bad because you can't see the result here. 59 00:03:08,850 --> 00:03:17,700 And that's its default behaviour of these forms, because the form up here is going to do the same thing. 60 00:03:17,700 --> 00:03:19,620 It's going to send something right. 61 00:03:20,190 --> 00:03:26,070 We don't have any action to go actually to some index of BHB, but it will send somewhere if we have 62 00:03:26,070 --> 00:03:29,360 a link here or even the button, if it's submit, it will send. 63 00:03:29,490 --> 00:03:29,840 Right. 64 00:03:30,120 --> 00:03:35,310 So that is the that's the default behavior. 65 00:03:35,400 --> 00:03:37,340 So how we can stop this default behavior. 66 00:03:37,560 --> 00:03:39,030 So this function here is empty. 67 00:03:39,030 --> 00:03:44,820 We can just pass here the E that is called event object. 68 00:03:44,820 --> 00:03:48,840 And what we can do with this event object, we can prevent the default. 69 00:03:48,840 --> 00:03:50,030 We can call this function. 70 00:03:50,220 --> 00:03:54,270 Don't worry about if you if we not if you don't, I'm not going to explain too much. 71 00:03:54,450 --> 00:03:59,670 But what it does this is actually well, OK, we'll say yes. 72 00:04:00,150 --> 00:04:00,660 Here it is. 73 00:04:00,660 --> 00:04:04,230 The button is click and I'm going to stop work for submitting. 74 00:04:04,560 --> 00:04:13,110 The link will not go where even if I put here in the link, I don't know if I put to index html or or 75 00:04:13,110 --> 00:04:14,730 I don't know sender HTML. 76 00:04:14,730 --> 00:04:15,750 It's not going to go there. 77 00:04:15,780 --> 00:04:16,170 Right. 78 00:04:16,950 --> 00:04:19,620 Because we are stopping the default behavior. 79 00:04:19,770 --> 00:04:20,550 How cool is this. 80 00:04:20,910 --> 00:04:22,980 Now that's all nice. 81 00:04:22,980 --> 00:04:25,680 And then, then we're going to continue doing something else. 82 00:04:26,520 --> 00:04:34,110 So what I'm going to do so I'm going to say OK, I want this button when it's click this button is actually 83 00:04:34,110 --> 00:04:39,360 we do have the ID here and I d I'm just going to say that if you don't have that, I'd just add that 84 00:04:39,360 --> 00:04:39,780 there. 85 00:04:40,020 --> 00:04:40,500 Right. 86 00:04:41,190 --> 00:04:43,950 And how we target the IDs like this. 87 00:04:45,180 --> 00:04:49,830 And now, OK, let's let's just say that this is working. 88 00:04:50,130 --> 00:04:54,630 The add button is clicked. 89 00:04:55,170 --> 00:04:55,620 Cut. 90 00:04:56,130 --> 00:04:59,160 Let's refresh the ad. 91 00:04:59,160 --> 00:04:59,790 But it is click. 92 00:04:59,900 --> 00:05:05,960 If I click here, the reset button, the air button, and it's going on and on, it doesn't matter. 93 00:05:05,960 --> 00:05:07,590 What we do is on and on, right. 94 00:05:08,120 --> 00:05:09,140 It's going to refresh. 95 00:05:09,470 --> 00:05:12,200 So this is what a name function. 96 00:05:12,200 --> 00:05:14,650 But I'm going to show you that we can cut this part. 97 00:05:14,810 --> 00:05:15,860 We don't need it here. 98 00:05:16,090 --> 00:05:18,950 We can close it and we can see you get on click. 99 00:05:20,000 --> 00:05:21,000 What's happening? 100 00:05:21,020 --> 00:05:22,440 What about when I when I do that? 101 00:05:22,910 --> 00:05:23,470 It's annoying. 102 00:05:23,870 --> 00:05:24,710 All click. 103 00:05:24,890 --> 00:05:30,110 So this is actually the name of a function and we need to function on click. 104 00:05:30,160 --> 00:05:31,280 You need to name it here. 105 00:05:34,070 --> 00:05:39,050 And that the thing that we cut, I'm just going to pasted it here, but it's not like that. 106 00:05:39,060 --> 00:05:43,090 I'm just going to kill this part, kill this poor hand. 107 00:05:43,100 --> 00:05:49,850 I'm just going to say here eat because again I need to pass this event object, this event object we're 108 00:05:49,850 --> 00:05:51,440 going to prevent from the default. 109 00:05:51,680 --> 00:05:53,060 OK, I'm going to change here. 110 00:05:53,060 --> 00:05:55,330 The add button is clicked. 111 00:05:55,340 --> 00:05:56,510 I just don't want to. 112 00:05:57,560 --> 00:06:02,590 Yeah, the reset button is clicked in the ad, but now it's working completely. 113 00:06:03,080 --> 00:06:08,800 Now we can cancel like this bad boy here, this event. 114 00:06:08,960 --> 00:06:12,110 So when I Konza like, I will see a bunch of things. 115 00:06:12,320 --> 00:06:16,760 So it's click the target is the I f f a plus circle. 116 00:06:17,000 --> 00:06:17,530 Right. 117 00:06:17,540 --> 00:06:18,250 Why is that. 118 00:06:18,260 --> 00:06:21,790 Because now our button you do have these eyeglass. 119 00:06:22,160 --> 00:06:23,870 That is why it's happening like this. 120 00:06:24,200 --> 00:06:27,080 We have the buttons, client X, client Y. 121 00:06:27,290 --> 00:06:29,200 These are the positional coordinates. 122 00:06:29,210 --> 00:06:30,640 I will just show you in a minute. 123 00:06:30,860 --> 00:06:36,410 So if you go to the down there or there, like a lot of things, just going to zoom in now. 124 00:06:37,610 --> 00:06:41,590 It's saying you've got your keys holding hope, is that right. 125 00:06:42,080 --> 00:06:46,810 So is trusted through layer x, layer Y, you don't have to know all of this. 126 00:06:47,540 --> 00:06:54,050 So page one and page X actually we can get all the original target is this one. 127 00:06:54,920 --> 00:06:57,320 Right, so you can access all of these things. 128 00:06:57,320 --> 00:06:59,060 I don't know if you can access the original target. 129 00:06:59,060 --> 00:07:00,430 And let me let's see. 130 00:07:01,250 --> 00:07:05,960 Yeah, probably now there is the target. 131 00:07:05,960 --> 00:07:06,830 Here is this one. 132 00:07:06,980 --> 00:07:09,100 There is a timestamp, the type of it. 133 00:07:09,500 --> 00:07:12,830 So what we can do, we can just access this one here. 134 00:07:12,830 --> 00:07:16,640 So if you want to check right, you can do it like this. 135 00:07:16,940 --> 00:07:19,880 Now, let's put it put it like this. 136 00:07:20,060 --> 00:07:25,700 Console the lock and I will say e dot target. 137 00:07:25,910 --> 00:07:27,290 It should give me the target. 138 00:07:27,290 --> 00:07:27,590 Right. 139 00:07:27,980 --> 00:07:31,220 I'm not sure if it is the target. 140 00:07:31,220 --> 00:07:34,250 Is this I f a circle. 141 00:07:34,580 --> 00:07:35,030 Right. 142 00:07:35,120 --> 00:07:44,510 So we can do a lot of things here so I can get, I can get this one is inside the button as I explained 143 00:07:44,510 --> 00:07:45,340 here before. 144 00:07:45,650 --> 00:07:49,550 So what we can do from the previous lecture can get the parent node of this one. 145 00:07:49,550 --> 00:07:50,500 I could go with that. 146 00:07:50,720 --> 00:07:51,920 OK, let's get the parent node. 147 00:07:52,220 --> 00:07:59,990 So I'm just going I'm just going to copy this one based on their inside target in OK, that parent. 148 00:08:01,880 --> 00:08:07,910 Note in I hope it's going to give me the button, I hope here is the button. 149 00:08:08,150 --> 00:08:13,700 We do have the button, the class in the IDs so we can grab all of these things. 150 00:08:13,850 --> 00:08:20,510 So if we need something like that, we can grab now we can just say, OK, get me the parent. 151 00:08:20,510 --> 00:08:22,400 No idea who is this? 152 00:08:22,520 --> 00:08:24,260 Maybe you need this idea for something. 153 00:08:25,400 --> 00:08:26,210 I shouldn't do that. 154 00:08:26,260 --> 00:08:27,200 All right. 155 00:08:29,480 --> 00:08:35,870 So when I clicked so that there is that one, so you can put it this one, the class. 156 00:08:41,390 --> 00:08:42,320 So it's undefined. 157 00:08:42,350 --> 00:08:46,460 OK, it's probably it's not a class, it's a class list. 158 00:08:49,340 --> 00:08:52,180 And I need to refresh your area. 159 00:08:52,850 --> 00:09:01,300 I'm talking, Liz, and add items and stuff like that so we can access all of these 01 things like that. 160 00:09:01,450 --> 00:09:02,080 Oh, good. 161 00:09:02,350 --> 00:09:03,570 You don't have to worry about it. 162 00:09:03,820 --> 00:09:12,550 Now, what else we need we can do here and we can just say, OK, what's what is the just going to come 163 00:09:12,550 --> 00:09:13,000 out of this one? 164 00:09:13,000 --> 00:09:15,240 Because this is too much writing and too much deleting. 165 00:09:15,490 --> 00:09:16,660 I'm just going to get the time. 166 00:09:16,840 --> 00:09:21,670 Remember that that was what clicked and that was here. 167 00:09:21,670 --> 00:09:26,010 When you do it here, it was saying, OK, that was click and this type can be different. 168 00:09:26,230 --> 00:09:28,170 I'm going to show you why I'm saying different. 169 00:09:28,180 --> 00:09:30,280 I'm just going to copy this one comment. 170 00:09:30,280 --> 00:09:37,140 This one in the top can be, for example, mouse over and I'm just going to reset. 171 00:09:37,960 --> 00:09:41,590 So when I do mouse over over that one, I shoot. 172 00:09:42,220 --> 00:09:47,320 I would expect these all these here in the function to be executed. 173 00:09:47,320 --> 00:09:47,610 Right. 174 00:09:47,620 --> 00:09:51,670 So I'm just going to go there is going to give me that pointer. 175 00:09:51,670 --> 00:09:54,310 And here he is in the mouse over. 176 00:09:54,950 --> 00:09:55,780 How cool is this. 177 00:09:55,990 --> 00:09:57,220 Everything we can do. 178 00:09:57,460 --> 00:10:02,650 You're learning a lot of things, my friends now so that we know the type. 179 00:10:02,900 --> 00:10:06,740 OK, what we can do, let's see what we can do else. 180 00:10:07,070 --> 00:10:07,900 I have no idea. 181 00:10:08,710 --> 00:10:11,340 We can do a lot of things if we want now. 182 00:10:13,240 --> 00:10:15,640 So what we have here is a type timestamp. 183 00:10:15,640 --> 00:10:16,870 We can get the timestamp. 184 00:10:17,440 --> 00:10:20,650 OK, Timestamp. 185 00:10:21,640 --> 00:10:23,680 Yeah, I'm just going to put it here. 186 00:10:24,880 --> 00:10:29,620 I need to refresh, by the way I put it, it's undefined and it's undefined. 187 00:10:31,750 --> 00:10:32,160 Let's see. 188 00:10:32,170 --> 00:10:35,600 Uh, Timestamp, what did I have? 189 00:10:35,620 --> 00:10:37,600 OK, because ass's with smaller. 190 00:10:37,630 --> 00:10:38,710 It should be with capital. 191 00:10:39,160 --> 00:10:39,490 Right. 192 00:10:39,490 --> 00:10:41,080 I'm just going to refresh it. 193 00:10:41,080 --> 00:10:44,290 I put it like that in timestamp that's going to give you the milliseconds. 194 00:10:44,290 --> 00:10:44,630 Right. 195 00:10:45,430 --> 00:10:46,930 What else we do have here? 196 00:10:47,230 --> 00:10:47,950 Let's just check. 197 00:10:47,950 --> 00:10:49,150 There are a lot of things you can do. 198 00:10:49,300 --> 00:10:55,180 You can print a lot of things here and yet timestamp unclick. 199 00:10:56,680 --> 00:10:59,830 So obviously, I'm not going to go through each and every of them. 200 00:11:00,130 --> 00:11:02,740 Right, because that is not healthy. 201 00:11:02,740 --> 00:11:05,230 Not neither for you, neither for me. 202 00:11:06,820 --> 00:11:14,800 So we can get the offset and the page X and page Y, I'm just going to show you that so is going to 203 00:11:14,800 --> 00:11:22,860 say, OK, page X and page page Y. 204 00:11:23,680 --> 00:11:26,680 So I do expect that were you. 205 00:11:26,770 --> 00:11:34,960 It is now the thing is that these coordinates or relative to the where the bottom is placed in the window. 206 00:11:34,960 --> 00:11:35,260 Right. 207 00:11:35,500 --> 00:11:43,000 So one X the Y was for vertical, the X was for horizontal, vertical and horizontal. 208 00:11:43,000 --> 00:11:51,460 For example, if I lower down this window and if I click it again, just wait. 209 00:11:52,030 --> 00:11:53,920 You will have a different values. 210 00:11:53,920 --> 00:11:54,310 Right. 211 00:11:54,490 --> 00:12:02,050 So nine, eight, five pretty much similar to this one, but eighty seven because that, that is from 212 00:12:02,050 --> 00:12:03,060 the Y here. 213 00:12:03,070 --> 00:12:03,610 Here it is. 214 00:12:03,760 --> 00:12:10,300 The Y is coming from top so I have eighty seven pixel from the top and I do have from the right nine 215 00:12:10,300 --> 00:12:13,810 hundred and eighty five pixels so we can change even that. 216 00:12:13,820 --> 00:12:17,680 So if I do it like that's not good. 217 00:12:18,220 --> 00:12:23,410 So if I do it like this, look at it now we just have it in it. 218 00:12:23,650 --> 00:12:31,660 So if you're doing ninety inspector actually here I don't want to bother you too much so you can just 219 00:12:31,660 --> 00:12:36,030 put it here in a come in inspector and see how many pixels you are, right. 220 00:12:36,310 --> 00:12:36,650 Yeah. 221 00:12:36,710 --> 00:12:37,090 Yeah. 222 00:12:37,090 --> 00:12:39,850 But that's that's a little bit complex here. 223 00:12:40,090 --> 00:12:41,350 I'm just going to close that one. 224 00:12:41,710 --> 00:12:42,850 Just going to go to the console. 225 00:12:43,000 --> 00:12:44,440 So now it will be different. 226 00:12:44,740 --> 00:12:55,690 And if I click if I do this, for example, if I do this and if I put it around here, I do expect eight 227 00:12:55,690 --> 00:12:56,740 hundred by something. 228 00:12:57,730 --> 00:13:02,050 If I can see it right now, we can just see it. 229 00:13:02,780 --> 00:13:03,220 So, yeah. 230 00:13:03,220 --> 00:13:04,870 Six, eight, six, eight by two. 231 00:13:04,870 --> 00:13:06,130 Forty six. 232 00:13:06,370 --> 00:13:09,280 Now you know these page X and page one. 233 00:13:09,580 --> 00:13:11,990 Sometimes developers use it and. 234 00:13:12,130 --> 00:13:12,520 Yeah. 235 00:13:12,520 --> 00:13:17,290 So you can pretty much get everything from these kinds of log even object. 236 00:13:17,500 --> 00:13:18,430 So thank you very much. 237 00:13:18,430 --> 00:13:22,650 Now you don't have to add event listeners on click on mouse over. 238 00:13:22,650 --> 00:13:26,290 Are we going to do in our course we're going to do this. 239 00:13:26,290 --> 00:13:28,390 So don't worry about are you going to learn them? 240 00:13:28,390 --> 00:13:33,640 So if you like this video, please thumbs up, subscribe, share it, give a five star rating if this 241 00:13:33,640 --> 00:13:38,890 is in the course and whatever you want, if you need something, just contact me. 242 00:13:38,950 --> 00:13:39,700 That's a thank you. 243 00:13:39,820 --> 00:13:40,480 Thank you very much.