Browser events: Input fields events

We have a number of events we can listen for in form elements

  • input fired on form elements when the element value is changed
  • change fired on form elements when the element value is changed. In the case of text input elements and textarea, it’s fired only once when the element loses focus (not for every single character typed)
  • cut fired when the user cuts text from the form element
  • copy fired when the user copies text from the form element
  • paste fired when the user pastes text into the form element
  • focus fired when the form element gains focus
  • blur fired when the form element loses focus

Here’s a sample form demo on Codepen:

See the Pen Form events demo by Flavio Copes (@flaviocopes) on CodePen.

Lessons in this unit:

0: Introduction
1: Handling events
2: The `DOMContentLoaded` event
3: The `event` object
4: Mouse events
5: Keyboard events
6: `preventDefault()`
7: Stopping event propagation
8: Bubbling and capturing
9: Form submit event
10: ▶︎ Input fields events
11: Creating custom events
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!