1 00:00:01,150 --> 00:00:06,940 In the last section we defined a callback of an input change and we pass it to this proc called onchange 2 00:00:06,970 --> 00:00:08,590 on our input tag. 3 00:00:08,620 --> 00:00:13,780 Now as we saw we very easily got a console log out any time that we changed that text input in this 4 00:00:13,780 --> 00:00:14,220 video. 5 00:00:14,260 --> 00:00:19,570 I want to very quickly do a refactor here just to show you an alternate way of writing out this event 6 00:00:19,570 --> 00:00:20,460 handler. 7 00:00:20,530 --> 00:00:24,490 The reason going to show you this is that you're going to very frequently see this alternate syntax 8 00:00:24,700 --> 00:00:26,950 in a lot of documentation and blog posts. 9 00:00:26,950 --> 00:00:31,870 And in fact we're even going to use the alternate syntax a couple of times throughout this course so 10 00:00:31,870 --> 00:00:37,180 I'm going to find my input tag right here and there's the onchange problem now rather than passing a 11 00:00:37,180 --> 00:00:39,940 reference to the on input change function right here. 12 00:00:40,120 --> 00:00:44,370 I'm going to delete that and replace it with an arrow function like so. 13 00:00:45,160 --> 00:00:50,440 This arrow function is going to be still called with that event object just as our callback method was 14 00:00:50,470 --> 00:00:53,300 up here and now inside this erro function. 15 00:00:53,440 --> 00:00:59,610 I can do a console log just as we did inside of our callback up here as well. 16 00:00:59,980 --> 00:01:05,460 So what you see right here and what we had before is absolutely identical is the same thing. 17 00:01:05,500 --> 00:01:11,440 It's just a slightly abbreviated syntax where we do not have to define a separate method on the class. 18 00:01:11,440 --> 00:01:14,720 We will very freely use this arrow function approach right here. 19 00:01:14,810 --> 00:01:20,290 Anytime that we have a single line of code that we want to execute anytime time that some event occurs 20 00:01:20,890 --> 00:01:24,250 as it stands right now we only have a single thing that we want to do here. 21 00:01:24,280 --> 00:01:25,270 Just the council log. 22 00:01:25,360 --> 00:01:30,580 So this could possibly be an appropriate time to use an arrow function as opposed to defining a separate 23 00:01:30,580 --> 00:01:32,000 method on the class. 24 00:01:33,570 --> 00:01:40,020 Now when you use an arrow function to pass a callback to a event handler like so very frequently just 25 00:01:40,020 --> 00:01:46,350 to further abbreviate this line you will see the event object right here abreviated as simply e like 26 00:01:46,350 --> 00:01:47,020 so. 27 00:01:47,550 --> 00:01:51,110 And then over here inside the console log we no longer have any event variable. 28 00:01:51,150 --> 00:01:56,810 We would now refer to it as it's like I said we very frequently do that just to slightly condense the. 29 00:01:57,990 --> 00:01:59,130 Now as a quick test. 30 00:01:59,160 --> 00:02:06,060 I'm going to save this file I'm going to flip back over and I will refresh the page and then enter some 31 00:02:06,060 --> 00:02:10,650 text in there and you'll see that we do in fact still get those changes appearing automatically. 32 00:02:11,490 --> 00:02:12,000 All right. 33 00:02:12,120 --> 00:02:14,360 So I'm going to undo those changes. 34 00:02:14,940 --> 00:02:20,250 I just want to very quickly let you know that we will very frequently be using that abbreviated syntax. 35 00:02:20,250 --> 00:02:21,780 So let's take a quick pause right here. 36 00:02:21,840 --> 00:02:26,190 When we come back the next section we're going to learn a little bit more about how we're going to use 37 00:02:26,190 --> 00:02:28,750 the value that is coming out of this event object.