In the last section we defined a callback of an input change and we pass it to this proc called onchange
on our input tag.
Now as we saw we very easily got a console log out any time that we changed that text input in this
video.
I want to very quickly do a refactor here just to show you an alternate way of writing out this event
handler.
The reason going to show you this is that you're going to very frequently see this alternate syntax
in a lot of documentation and blog posts.
And in fact we're even going to use the alternate syntax a couple of times throughout this course so
I'm going to find my input tag right here and there's the onchange problem now rather than passing a
reference to the on input change function right here.
I'm going to delete that and replace it with an arrow function like so.
This arrow function is going to be still called with that event object just as our callback method was
up here and now inside this erro function.
I can do a console log just as we did inside of our callback up here as well.
So what you see right here and what we had before is absolutely identical is the same thing.
It's just a slightly abbreviated syntax where we do not have to define a separate method on the class.
We will very freely use this arrow function approach right here.
Anytime that we have a single line of code that we want to execute anytime time that some event occurs
as it stands right now we only have a single thing that we want to do here.
Just the council log.
So this could possibly be an appropriate time to use an arrow function as opposed to defining a separate
method on the class.
Now when you use an arrow function to pass a callback to a event handler like so very frequently just
to further abbreviate this line you will see the event object right here abreviated as simply e like
so.
And then over here inside the console log we no longer have any event variable.
We would now refer to it as it's like I said we very frequently do that just to slightly condense the.
Now as a quick test.
I'm going to save this file I'm going to flip back over and I will refresh the page and then enter some
text in there and you'll see that we do in fact still get those changes appearing automatically.
All right.
So I'm going to undo those changes.
I just want to very quickly let you know that we will very frequently be using that abbreviated syntax.
So let's take a quick pause right here.
When we come back the next section we're going to learn a little bit more about how we're going to use
the value that is coming out of this event object.