A simple guide to Javascript event handling in React

The main purpose of Javascript in web development is to handle interactions between the user and the web interface - what happens when a user fills a form or clicks a button? These interactions are usually handled through something called “Events” in Javascript, hence handling these events in the best way possible would lead to better interaction and optimize user experience.

An event handler is a simple form of Javascript code that is usually added to an HTML or JSX element to handle the interaction between the user and the frontend interface. Javascript has several event handlers which can be used for different purposes.

In this article, I would be highlighting some of the most important event handlers in Javascript and when to use them.

1) OnClick

This event handler controls interactions that occur when a user clicks an element on the interface. It is worth noting that although buttons are the most preferred elements to use with this event handler, any HTML element can have an onClick event handler.

An example implementation of the onClick event handler can be found below:

<div className="flex justify-center my-4">
          <img
            className="cursor-pointer"
            onClick={() => window.location.open('/')}
            src={Logo}
            alt="logo"
          />
        </div>

In the Javascript React code above, the onClick event handler is added to a logo image and redirects the user to the homepage of the app when clicked.

2) OnSubmit

This event handler controls form submissions, particularly when the enter button is pressed on a form element. To prevent the default behaviour of form submission which usually reloads the page, it is best to attach the onSubmit event handler as an onSubmit.prevent instead, or yet insert a prevent default function to disable the default behaviour of a submit event handler.

      <form onSubmit={(e)=>handleSubmit(e)}>
            <label>Name</label>
            <input onChange={(e)=>setName(e.target.value)}></input>
        </form>

3) OnChange

This event handler is typically used to detect changes made to an HTML input element and fire a function to update a data value based on this change. The target.value property of the event that fires usually contains the data needed. An example implementation of the onChange event handler can be found below:

import React from "react"

const [name,setName] = React.useState("")
function nameForm(){
return(
<label>Name</label>
<input type="text" onChange={(e)=>setName(e.target.value)}></input>
)
}

export default nameForm

In this react component, the onChange event handler is being used to set the value of the Name data upon every input.

4) OnKeyDown and OnKeyUp

These event handlers control when a key on the keyboard has been pressed. Its use is quite similar to the onChange event handler, however, the major difference is that both OnKeyDown and OnKeyUp also return the key that was pressed. Although OnKeyDown and OnKeyUp perform similar functions, a differentiator between the two is that OnkeyDown is fired when a button on the keyboard is pressed while OnKeyUp is fired when a button on the keyboard is released. As a result, the OnKeyDown event handler is faster and more commonly used than the OnKeyUp event handler.

An example implementation of OnKeyDown and OnKeyUp event handlers is displayed below:

import React from 'react'

const [name,setName] = React.useState("")

function dobForm(){
return(
<form onSubmit={(e)=>handleSubmit(e)}>
            <label>Date of birth</label>
            <input type="date"           
      onKeyDown={(e)=>setName(e.target.value)}></input>
        </form>
)}

export default dobForm

Conclusion

As Javascript provides a lot of options of handling events, it can get quite confusing to know which event handlers to use for a particular case. The general rule of thumb to follow in cases like this would be:

If your interaction is a "clicky" one, use the onclick event handler

If your interaction is an input form one, use the onSubmit event handler to handle it

If you would like to get data from a textfield/select field input, use the onChange event handler

You can also read up on more event handlers in Javascript by clicking here