We have now manually applied a type invitation to an event right here of type change event, but as
I mentioned, there are other types of events that we frequently want to use in Siberia project.
So other kinds of events, such as maybe a form submission or maybe a drag event where user clicks and
drags on some kind of element.
The change event type that we have right here is only applicable to elements that can be changed, such
as text inputs, maybe a text area, radio buttons, checkboxes and so on.
So how do we apply a type to these other kinds of events?
Well, let's first begin by creating another element right after our div, right after the input.
I'm going to add in a device that says Drag me.
And then going to add on an attribute to it of Dragonball and then on drag start.
Well, then put in curly braces, I'm going to reference a callback function that we're going to take
in just a moment called on start.
And I'll put in on drag starts right here.
Now, this entourage start function is going to be invoked whenever a user starts dragging this div
just to test it out really quickly.
I'm going to add in a console log of I'm being dragged.
I'll then save this, let's go back over to our browser.
And then going to attempt to drag that Divx in as soon as I do, I see that console loga I'm being dragged.
So at some point in time, we might want to access the event object that is provided to Andrew Stark
because that event object might have some information about maybe how far this thing is being dragged
or what direction or some other relevant information.
So I'm going to try to receive that event object, but then once again, we're going to be told we have
to apply a type to this event object.
So, again, we need to kind of figure out what kind of type we're going to apply right here.
As you'd imagine, kind of guessing the type is a little bit challenging.
It's kind of hard to just guess that we should have put in here, react change event and put element.
So once again, we can just mouseover on drag's start and then we can just directly take that type right
there.
I'll do a copy, a colon, a paste, and now we've got a correct annotation on that event object, I
replace the console log with the event and then add dots and we can see all the different properties
that we get on an event object for a drag event.
Now, what other kinds of events are there in general?
Well, I just want to very quickly show you some others.
If you do a command click on either change event right here or drag event right here, you'll be taken
to the type definition file for react itself.
And inside of your you can see a listing of all the different kinds of events that you can receive inside
react application from elements.
So we get stuff like a clipboard event, which is where user copies or paste information, a composition
event that is related to the stuff like autocomplete in general on mobile devices.
It's a little bit more complicated than that, but that's kind of a good enough understanding drag events,
which we just use point to events which are like where you use a pen on something like a tablet.
We get focus events where when a user focuses or essentially clicks into an element and you can kind
of go through this list and see all the other kinds of events available to us as well.
So these are all different kinds of events that you might eventually want to use or I should say all
different kinds of types for events that you might eventually want to use inside of your different event
handlers.
But again, at the end of the day, the real kind of trickier is whenever you define that callback right
there, that Propp just mouse over the top, you can do a copy paste and it's always going to give you
the accurate and correct type.
OK, so that's pretty much it around event handlers with TypeScript and react, so let's take another
pause right here and move on in just a moment.