Alright, in this lecture, we'll look at some interesting events. So in the previous lecture we looked at on clicking on double click right. And you also learn what events are. So in this lecture, we'll look into input events, and what are different types of input events available. All right, so let's get started. There are several types of input events, we'll go over a few.

And we'll go over each with a certain example. So you can understand how to use it in in terms of real actual project or how to, you know, use in much more practical sense. The first event which we're going to cover is on blood. So suppose if you have an input event, so this one you know that all the example I just put in prevent, as a placeholder, enter name. And what I want to identify from this event is that whenever the user clicks off this input field beyond An executive order. So we'll go to the method say blood and alert the user.

Click Go to go from the input field. Alright. So what happens is whenever I focus on this input field, and I type something, it's fine, right? So whenever I click out of it, an alert pops up saying that I kicked off the input field. So order is used for that. So one more neat trick you need to understand is, instead of, instead of typing beyond, we can just say add read.

So similarly, how we use polling for the V bind, we can use a date for V on the next one is similar to blur that is called us focus. We can say it focus You have focus. So similarly if I press on this, I will get an alert, you have focused, the spelling is wrong, but excuse me for that. So, similarly what we can also do is we can create a form and we can place these two input variables inside it. And we can have anywhere events such that all submit, right, what happens when the user press Submit. So, we can say submit pressed.

So, inside this method we can say submit So for submit, we can have a button in, say, type Submit. And whenever I click the button, it says submit pressed. And so one thing we can notice here is, whenever whenever the Submit is pressed, we are getting submitted. And what's also happening is, the page gets reloaded. So what if we don't want that to happen? What if I want to know return the value of the name, for example, we can bind it using the model.

And I can say name. And what if, while pressing submit, I want to console log the name. Right? So I can enter the name. And if I say submit, first we get the alert fee, then the page refreshes will not be able to see the console log message because it's it's way too fast. What if you don't want this so So what we can do is there is something called as an event modifier.

So these are the basic events available for JavaScript. And you can modify that. The way you can modify it is by using the dot attributes, dot prevent. So what happens is it prevents a default behavior of the submit, submit action. So for the Submit action, the default behavior is to reload the page or to submit the form right, so to submit the form and enter the page, right. So here, if I say my name again, and I say submit, I'm getting my name in the console, it doesn't reload anymore, this is called as event modifier.

All right, there is also another even modifier that is called as once. So the previous one which we discussed is dot prevent, which prevents a default behavior. Whereas dot ones make sure that the event is done only a single time. So for example, if you have a button that says, click me and it click, we have something such as Pardon this clicked right? So I can have this method. And I can say console dot log.

Button Click. So usually if I don't mention an even modifier, what's gonna happen is the number of times I click the button the same number of times, I'm going to get the console log message. But once I had the red modifier dot once and if I refresh it, I mean, I'm unable to click the button a second time. So once I've clicked it, it runs and that's it. So back to our input events are the one is key down. I guess you might know what this does.

So when I Go to the input field. And when I press the key and the keys down, I get the message. So similarly, we have our other properties called as key up. We are we use the same method, but we say key is up. And if I told the difference between the key event and the key down event is, the key don't works when the key is pressed down, right? But whereas the key up works when the key is released, that's it.

Keys down, keys up, keys down keys up. So there is also one more neat event that is just pressed so you can understand whenever the key is pressed, key press. So whenever I type anything, it gets automatically console logged. So that's it for input events, and even modifiers. So for the next lecture, we'll look into mouse events. So whatever events we can capture with mouse and We'll have some examples for that.

So I'll see you the next one.