DEV Community

Cover image for 5 Input Events That You Will Use At Least One Of Them In Your Next Projects.
Aya Bouchiha
Aya Bouchiha

Posted on

5 Input Events That You Will Use At Least One Of Them In Your Next Projects.

Hello,
I'm Aya Bouchiha,
today, we'll discuss 5 input events that you will use at least one of them in your next projects.

firstly, we need to know that handling events can be done with:

  • onEventName

example:

showButton.onclick = handleClick;
Enter fullscreen mode Exit fullscreen mode
  • addEventListener('eventName', function)

example:

showButton.addEventListener('click', handleClick)
Enter fullscreen mode Exit fullscreen mode
  • The event as a attribute (onEventName="function()")
<button onclick="doSomething()"></button>
Enter fullscreen mode Exit fullscreen mode

blur and focus

focus: This happens when the user focuses on the input field.
blur: happens when the user leaves the input field.

input

input: This happens immediately when the user changes the input's value.

reset

reset: This happens when a form is reset by clicking to a reset input or a reset button.

submit

submit: This happens when a form is submitted, by clicking a submit button or a submit input.

Summary

  • focus happens when the user leaves the input field.
  • blur: happens when the user focuses on the input field.
  • input: happens immediately when the user changes the input's value.
  • reset: happens when a form is reset.
  • submit: This happens when a form is submitted.

References

Suggested Posts

To Contact Me:

Happy codding!

Top comments (2)

Collapse
 
skngetich5 profile image
Stephen Ng'etich

Please check on the summary part on the focus and and blur. You have interchanged it

Collapse
 
ayabouchiha profile image
Aya Bouchiha

My bad, thank you Stephen a lot for reminding me 🙏🏻