1 00:00:00,930 --> 00:00:06,480 We have now manually applied a type invitation to an event right here of type change event, but as 2 00:00:06,480 --> 00:00:11,040 I mentioned, there are other types of events that we frequently want to use in Siberia project. 3 00:00:11,310 --> 00:00:16,530 So other kinds of events, such as maybe a form submission or maybe a drag event where user clicks and 4 00:00:16,530 --> 00:00:17,850 drags on some kind of element. 5 00:00:18,360 --> 00:00:23,010 The change event type that we have right here is only applicable to elements that can be changed, such 6 00:00:23,010 --> 00:00:27,730 as text inputs, maybe a text area, radio buttons, checkboxes and so on. 7 00:00:28,080 --> 00:00:30,780 So how do we apply a type to these other kinds of events? 8 00:00:31,260 --> 00:00:36,630 Well, let's first begin by creating another element right after our div, right after the input. 9 00:00:36,860 --> 00:00:39,750 I'm going to add in a device that says Drag me. 10 00:00:41,410 --> 00:00:47,170 And then going to add on an attribute to it of Dragonball and then on drag start. 11 00:00:48,460 --> 00:00:52,830 Well, then put in curly braces, I'm going to reference a callback function that we're going to take 12 00:00:52,840 --> 00:00:54,550 in just a moment called on start. 13 00:00:55,560 --> 00:00:58,350 And I'll put in on drag starts right here. 14 00:00:59,670 --> 00:01:04,349 Now, this entourage start function is going to be invoked whenever a user starts dragging this div 15 00:01:04,830 --> 00:01:06,220 just to test it out really quickly. 16 00:01:06,270 --> 00:01:09,030 I'm going to add in a console log of I'm being dragged. 17 00:01:10,300 --> 00:01:13,150 I'll then save this, let's go back over to our browser. 18 00:01:14,350 --> 00:01:19,900 And then going to attempt to drag that Divx in as soon as I do, I see that console loga I'm being dragged. 19 00:01:20,950 --> 00:01:26,020 So at some point in time, we might want to access the event object that is provided to Andrew Stark 20 00:01:26,290 --> 00:01:31,030 because that event object might have some information about maybe how far this thing is being dragged 21 00:01:31,030 --> 00:01:33,760 or what direction or some other relevant information. 22 00:01:35,000 --> 00:01:39,680 So I'm going to try to receive that event object, but then once again, we're going to be told we have 23 00:01:39,680 --> 00:01:41,930 to apply a type to this event object. 24 00:01:42,510 --> 00:01:46,360 So, again, we need to kind of figure out what kind of type we're going to apply right here. 25 00:01:46,880 --> 00:01:50,390 As you'd imagine, kind of guessing the type is a little bit challenging. 26 00:01:50,660 --> 00:01:55,950 It's kind of hard to just guess that we should have put in here, react change event and put element. 27 00:01:56,570 --> 00:02:02,030 So once again, we can just mouseover on drag's start and then we can just directly take that type right 28 00:02:02,030 --> 00:02:02,300 there. 29 00:02:05,190 --> 00:02:12,850 I'll do a copy, a colon, a paste, and now we've got a correct annotation on that event object, I 30 00:02:12,940 --> 00:02:18,340 replace the console log with the event and then add dots and we can see all the different properties 31 00:02:18,340 --> 00:02:21,240 that we get on an event object for a drag event. 32 00:02:24,520 --> 00:02:26,800 Now, what other kinds of events are there in general? 33 00:02:26,830 --> 00:02:28,780 Well, I just want to very quickly show you some others. 34 00:02:28,930 --> 00:02:34,630 If you do a command click on either change event right here or drag event right here, you'll be taken 35 00:02:34,630 --> 00:02:36,670 to the type definition file for react itself. 36 00:02:36,910 --> 00:02:41,320 And inside of your you can see a listing of all the different kinds of events that you can receive inside 37 00:02:41,330 --> 00:02:43,630 react application from elements. 38 00:02:44,330 --> 00:02:50,230 So we get stuff like a clipboard event, which is where user copies or paste information, a composition 39 00:02:50,230 --> 00:02:54,960 event that is related to the stuff like autocomplete in general on mobile devices. 40 00:02:54,970 --> 00:02:59,530 It's a little bit more complicated than that, but that's kind of a good enough understanding drag events, 41 00:02:59,530 --> 00:03:04,480 which we just use point to events which are like where you use a pen on something like a tablet. 42 00:03:05,080 --> 00:03:10,060 We get focus events where when a user focuses or essentially clicks into an element and you can kind 43 00:03:10,060 --> 00:03:13,450 of go through this list and see all the other kinds of events available to us as well. 44 00:03:14,020 --> 00:03:18,280 So these are all different kinds of events that you might eventually want to use or I should say all 45 00:03:18,280 --> 00:03:22,810 different kinds of types for events that you might eventually want to use inside of your different event 46 00:03:22,810 --> 00:03:23,410 handlers. 47 00:03:23,710 --> 00:03:28,600 But again, at the end of the day, the real kind of trickier is whenever you define that callback right 48 00:03:28,600 --> 00:03:33,190 there, that Propp just mouse over the top, you can do a copy paste and it's always going to give you 49 00:03:33,190 --> 00:03:34,600 the accurate and correct type. 50 00:03:35,610 --> 00:03:41,100 OK, so that's pretty much it around event handlers with TypeScript and react, so let's take another 51 00:03:41,100 --> 00:03:43,100 pause right here and move on in just a moment.