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.

#webdev #javascript #codenewbie #beginners

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 🙏🏻