DEV Community

Pulkit Kashyap
Pulkit Kashyap

Posted on

Browser and React onChange event: The conundrum

The Problem

Sometimes I think we all are so inclined towards Javascript frameworks or libraries that we don't pay attention to how things work natively. Recently when I was debugging an issue about input tag's onchange event, I was startled when the callback function was not being called on changing the input value. Well, React triggers onChange whenever one changes the input value. Coming from React I just assumed that such things would work the same in vanilla Javascript 😔 😔 . The way browser fires the onchange event is different.

Javascript onchange

Coming from React it's easy to fall into the trap. But let's understand some events the browser fires when one interacts with the input tag

  • onfocus - Fired when the user sets focus on the element
  • onblur - Opposite of onfocus. Fired when an element loses focus
  • onchange - (the most interesting one 😅). Unlike React, the browser fires onchange event after focus from input element is taken off. So when focus is set on an input element and something is typed, onchange won't be fired until and unless the input element is out of focus.

When an element is out of focus, the browser assumes that the user is done making the change(probably the reason why onchange is fired late).

Let's see this in action. Check out the JS part here and open your console to see what is logged.
Note that onchange is fired only when input is out of focus

Question for the readers 🧐

I am not too sure as to why in the above example onblur callback is fired after the onchange callback. We know now that onchange is fired when the element is out of focus. Know the reason?? Please comment down below.

React onChange

Apart from the camel case difference the way React onChange handler works is also pretty different. It gets triggered whenever one makes a change in the input element value.
I tried to create something like React onChange. Let's have a look (not saying that this is how it works exactly).

  • I had attached my custom onChange callback to the element.
  • Using setter/getter to get the previously entered value and compare it with the latest one.
  • Additionally attached a keyup event listener to get hold of the latest value
  • Notice that the custom onChange handler gets triggered everytime a change is made.

Bye Bye !! 👋👋 Hope there were takeaways.

Let's connect


Top comments (7)

miketalbot profile image
Mike Talbot ⭐

onchange is fired when "the user commits the change" to the input field. So it happens when they press Enter or leave the field for a standard text input or text area. Given this is an input event it occurs before the more general onblur.

fjones profile image
kpulkit29 profile image
Pulkit Kashyap

Couple of drawbacks when using input event

jonrandy profile image
Jon Randy 🎖️ • Edited

Coming from React I just assumed that such things would work the same in vanilla Javascript

This is the problem with not knowing the basics before moving to a framework. I've interviewed many, many developers who simply cannot do anything without React or framework XXX and all the associated tooling. That is a really bad state for the industry to be in

kpulkit29 profile image
Pulkit Kashyap

Completely agree

kpulkit29 profile image
Pulkit Kashyap • Edited

Yup agreed. Could have used that.

kpulkit29 profile image
Pulkit Kashyap

Check notes for