Frontend Developer's Guide and Cheatsheet to Web Events, Listeners and Event Handling in ReactJS

Intro: Modern Web Apps and Events

• Take a look at the events that you will usually encounter as a web developer, whether in the backend or (most often) in the frontend of the web app.
  
  
• Cover the event listeners used to "listen for"/track DOM events.
  
  
• List the matching "Reactified" DOM event listeners.
  
  
• Finally, we will cover how to handle DOM events in your React components, whether inline (within the JSX) or in an external function.

1. How Events Work

1. Event Triggered: An event can be triggered by one of:
   
   
   1. User input in a form field. This could be an input field (for text, email, number, etc. values), a select field, textarea, etc.
      
      
   2. Mouse event: a user clicks, double-clicks or moves the mouse over an element in the DOM.
      
      
   3. Network Event: The web page loads, unloads, fails to go online, goes offline, etc.
      
      
      
   4. Or, something else ... (some of which we will cover through other sections of this guide.)
      
      
2. Event Handled: Once an event gets triggered, it is the responsibility of the JavaScript code on that page to respond to the event that was emitted.
   
   "Handling the event" refers to what the JavaScript code should do to respond to the event that was triggered.
   
   This event handling can be done inline (right inside the HTML/JSX) or in an external function (if the event handling logic's code is more complex, uses conditionalal statements, takes more than one line of JavaScript to implement, and so on.)
   
   We will cover some basic event handling operations (both inline and in an external function) later on in this guide.
   
   
3. DOM Gets Updated: Depending on what event was triggered, how it was handled and the intended after-effect, the DOM could be updated to reflect the DOM event that just took place.
   
   This is optional (depending on the intended user experience of the app), but recommended.
   
   Sometimes, a DOM update may not need to happen (for example, when a user clicks on a button that is just for aesthetic, but not interactive, uses in the UI.)
   
   In other cases, a page (i.e the DOM) may need, for instance, to print a success or error message after a user submits a form he/she was filling in.

2. On Events, Event Listeners and Event Handlers

1. `Event`: This something that happens in your browser, window, document or an HTML (or JSX) element. This could be a click, focusing on a button or input field, a keypress or something triggered by a connection status or a WebSocket activity.
   
   An event can come from the Window (such as being opened, closed or navigated away from), an Element on the page (such as a `<form>`, `<input>`, `<div>` or `<button>` element/tag), a Keyobard action (such as pressing a key, releasing a key, etc.) or from the Mouse or pointing device (such as a click, mouse-over, blur or drag).
   
   Whatever the source of what just "happened", the thing that just happened is called an event in frontend terms.
   
   
2. `Event Listener`: To monitor whether or when a particular event (click, keypress, etc.) happens in the DOM, you "listen" for the event.
   
   To listen for an event, you use an HTML property known as an "event listener". This event listener will go inside the HTML element/tag that you want to monitor/listen on for a particular event.
   
   An event listener is named by prefixing it with "on" followed by the name of the event.
   
   So, for example, the event listener for the click event would be "onclick", the event listener for the "dragstart" event would be "ondragstart" and the event listener for the "loadstartcapture" event would be "onloadstartcapture".
   
   
   This is in plain HTML and JavaScript.
   
   In React, the event listeners are renamed to conform to JavaScript naming conventions. So, they are camelCased. It is prefixed with the "on" word and every word in the event's name will be Capitalized.
   
   So, for example, some event names and their respective event listeners would be:
   
   
   • `click` : `onClick`
     
     
   • `mousemove`: `onMouseMove`
     
     
   • `loadstartcapture`: `onLoadStartCapture`
     
     In other words, to create an event listener in React, you will:
     
     
     • prefix the event listener's name with "on"
       
       
     • Capitalize every word in the event name. E.g `loadstartcaptue` becomes `LoadStartCapture`
       
       
     • And, voila! You have an event listener to use in your React JSX code.
       
       If in doubt about how to properly name an event listner in React, see the React Common Components and Events Reference in the official React docs.
       
       
3. `Event Handler`: So, you know what an event is and how to listen for an event.
   
   But, what do you do after you listen for an event (and that event is triggered in your DOM or Window)?
   
   Well, you handle the event that just happened. Because that's what Frontend Engineers do. To handle an event, you use an "event handler".
   
   An event handler is a piece of JavaScript code that serves as the logic for how to react to an event that takes place in your app.
   
   You can handle an event inline (i.e right inside the HTML or JSX markup of your web page or component) by passing your JavaScript code to the event listener in a pair of "quotes" (if using plain HTML) or in a pair of curly {braces} if using JSX (i.e. in React).
   
   You can also create an external JavaScript function (in an external file or inside your React component) and then reference it from your HTML/JSX markup.
   
   We will look at examples of both types of event handlers (in the How Events are Handled in React section) later on in this guide, God willing.

• An event is something (like a click, mousemove, form submission, etc.) that happens in your browser window, web page or React component.
  
  
• An event listener is an HTML property that is prefixed with "on" and followed by the name of the event it is monitoring/listening for.
  
  In plain HTML, the event listener will be all lowercase (as in "oneventname"). In React, every word of the event name will be camelCased (as in "onEventName").
  
  So, the `onmousemove` event listener (in plain HTML) will now be `onMouseMove` in your React JSX.
  
  
• An event handler is a piece of JavaScript code that determines how to react to the event that just happened in your Window or DOM. This JavaScript code could either be inline (right inside your HTML or JSX markup) or in an external JavaScript function.

3. Event Sources

3.1: Window

• Clipboard Events: These check and track the status/contents of the clipboard. These are the `copy`, `cut` and `paste` events
  
  
• Connection Events: These track the status of the browser's access to the Network. These are the `offline` and `online` events.
  
  
• Device Orientation Events: These track the orientation of the device (phone, tablet or computer) based on data from the magnetometer orientation sensor. These are the `devicemotion`, `deviceorientation` and `deviceorientationabsolute` events.
  
  
• Focus Events: These track when when an element gains or loses focus. These are the `focus` and `blur` events.

3.2: Document

• Document: is the "container"/web page open in your browser window/tab.
  
  
• DOM = 'contents of the web page' and contained within the Document. These are the headings, paragraphs, forms, buttons, and so on that you see on the web page.
  
  The "contents" of the web page would include such HTML elements as `<body>`, `<div>`, `<p>`, `<span>`, `<table>` and every other HTML element (derived from the HTMLElement  ), which we will cover shortly) that is rendered in a web page.

• Clipboard events: (`cut`, `copy` and `paste`)
  
  
• Fullscreen events: (`fullscreenchange`, `fullscreenerror`)
  
  
• Load and unload events: (`DOMContentLoaded` && `readystatechange`)
  
  
• Pointer lock events: (`pointerlockchange`, `pointerlockerror`)
  
  
• Scroll events: (`scroll`, `scrollend`)
  
  
• Selection events: (`selectionchange`)

3.3: Element

• Clipboard events
  
  
• Animation events
  
  
• Composition events
  
  
• Fullscreen events
  
  
• Focus events
  
  
• Keyboard Events
  
  
• Mouse events
  
  
• Pointer events
  
  
• Transition events; and
  
  
• Touch events

3.4: HTMLElement

• Clipboard events: (`cut`, `copy`, `paste`)
  
  
• Popover Events: (`beforetoggle`, `toggle`)
  
  
• Drag-and-Drop Events: (`drag`, `dragend`, `dragenter`, `dragleave`, `dragover`, `dragstart`, `drop`)
  
  
• Mouse Events: (`click`, `dblclick`, `mousedown`, `mouseenter`, `mouseleave`, `mousemove`, `mouseout`, `mouseover`, etc.)
  
  
• Focus Events: (`focus`, `blur`, `focusin`, `focusout`)
  
  
• Keyboard Events: (`keydown`, `keypress`, `keyup`)

3.5: HTMLFormElement

• `reset`: For when the form is cleared/reset
  
  
• `formdata`: For after the user-entered form's data (i.e. `formdata`) is collected into a list (and ready to be submitted)
  
  
• `submit`: For when a user hits the "submit" button

3.6: HTMLInputElement

• `<input>`: Irrespective of the input "type" property ("search", "text", "email", "password", "number", "checkbox", "radio", "color", "file", etc.)
  
  
• `<select>`: Whether "multiple" options can be selected or not.
  
  

• `invalid`: If the input fails validation
  
  
• `select`:
  
  
• `search`: On an `<input type='search'>` element; when the search is initiated.
  
  
• `selectionchange`: When the text selection has changed in an `<input />` element.

3.7: XMLHttpRequest

 The XMLHttpRequest-related events include:

• `abort`
• `error`
• `load`
• `loadstart`
• `loadend`
• `progress`
• `readystatechange`
• `timeout`

For a more detailed coverage, please, see the XMLHttpRequest Events documentation on MDN.

3.8: Web Media

These Web Media APIs include the:

• MediaStream
  
  
• MediaRecorder
  
  
• HTMLMediaElement
  
  
• ... and others.

3.9: WebSocket

• `open`: For when a WebSocket connection is opened.
  
  
• `close`: For when the connection with the WebSocket is closed.
  
  
• `error`: When there was an error establishing a connection with the WebSocket.
  
  
• `message`: For when a message is received via a WebSocket connection.

3.10: WebRTC

• `open`: A new RTCDataChannel has been opened (or re-opened) successfully.
  
  
• `datachannel`: When a new RTCDataChannel connection has been opened/established.
  
  
• `closing`: To indicate that the RTCDataChannel (and its underlying data transport) is preparing to close.
  
  
• `close`: To indicate that the RTCDataChannel (and its underlying data transport) has successfully-closed.
  
  
• `message`: When a message has been received on the RTCDataChannel.
  
  
• `error`: To indicate that an error has occured with either the RTCDataChannel or the RTCDtlsTransport system.
  
  
• `connectionstatechange`: When the state of the RTC connection has changed.
  
  
• ... and more.

3.11: NetworkInformation

It supports all the events from the base Event object and an additional `change` event (for when the connection state changes.)

3.12: Payments API

4. Reactifying DOM Events and Listeners

• your events are all lowercase (such as "mousemove", "change", etc.) even if an event's name is composed of more than one word (such as "beforetoggle", "dragstart", and so on.)
  
  
• the event listeners are prefixed with "on" followed by the name of the event, which is why you have "onclick", "onsubmit", "onfocus", and so on. So, for example, you will have:  `<button type="button" onclick="getFormInfo();">Info</button>`

• your events are lowercased whether the event's name is a single word (like `change`, `focus`, `click`), made up of two words (such as `dblclick`, `mousemove`, `dragstart`, `keyup`, etc.) or multiple words (such as `mousemovecapture`, `canplaythrough`, etc.)
  
  
• your event listeners are prefixed with `on` and camelCased. Each word in the event listener's name is Capitalized.
  
  So, you will have event listeners like: `onSubmit`, `onClick`, `onChange`, `onSelect`, `onMouseMove`, `onMouseMoveCapture`, `onCanPlayThrough`, etc.)

5. Most Common Events and their Event Listeners

6. Mouse Events

7. Keyboard Events

8. Touch Events

Window

9. Form Events

10. The `Event` Object

11. Common Event Sub-Classes/Interfaces

• `MouseEvent`: This represents the events that happen due to a mouse movement on the page. It includes the `click`, `mousedown` and similar events covered in the Mouse Events section of this guide.
  
  You can read more detailed coverage about the MouseEvent interface on the MouseEvent interface docs on MDN.
  
  
• `KeyboardEvent`: This represents events that are triggered due to a web page user's interaction with the keyboard.
  
  See the Keyboard Events section for the list and the KeyboardEvent interface docs on MDN for a more detailed technical coverage of it.
  
  
• `ClipboardEvent`: This interface represents the events that are tied to your clipboard, such as `copy`, `cut` and `paste`.
  
  You can dive deeper into the details of the ClipboardEvent interface in the MDN docs.
  
  
• `FocusEvent`: This represents the events that deal with focusing on and off an element in the DOM. The `focus` and `blur` events fall under this.
  
  See the FocusEvent docs for more details, if you need to.
  
  
• `SubmitEvent`: This is the `submit` event that is emitted when an HTML/JSX form is submitted.
  
  The SubmitEvent docs has more details about this event interface.
  
  
• `TouchEvent`: This interface represents the events that are emitted when your user interacts with your web app on a touch-enabled device like a smartphone or a tablet.
  
  The TouchEvent interface docs has more details, if you want to learn more about it. 

12. The `EventTarget` Object

• `tagName`: This is the name of the HTML tag that is the current element. This could be "BUTTON", "SPAN", "DIV" and so on, depending on the name of the HTML tag.
  
  
• `textContent`: which is the actual text that is in the element (or between the opening and closing tags of the element, if the element is not a self-closing element).
  
  
• `style`: A reference to the element's CSS styles
  
  
• `innerHTML`
  
  
• `innerText`
  
  
• `id`: if available
  
  
• `children`: a collection of the HTML elements under the target element.
  
  
• `className`: which represents the CSS class name of the element.
  
  
• `value`: In your React component (and while working with forms), this is the value of the user input (in a `<textarea />` or `<input />` element) or selection (in a `<select>` element). Usually, you can access this using the `event.target.value` property.
  
  
• ... and a few dozen other properties that the `EventTarget` object can have depending on what properties the actual target element has.

• `event.target`: To point to the target object that triggered the event. Its properties (that you will often need to work with in your React components) include:
  
  
  • `EventTarget.value`: This is referred to as `event.target.value` in your frontend code.
    
    
• `event.currentTarget`.
  
  

13. Event Properties and Methods

• `event.target`:. This is a reference to the actual HTML tag/element that triggered the event. It is the `<button>`, `<input />`, `<p>` tags in your DOM. It is the `EventTarget` object that we covered earlier.
  
  You can dive deeper into its API at https://developer.mozilla.org/en-US/docs/Web/API/EventTarget
  
  One of the most common properties of `event.target` property that you will be accessing when building forms in your React components is the `event.target.value` which represents the value of a form field.
  
  Usually, you will use this `event.target.value` property to set the value of a piece of the component's local state (related to the form fields) as well as to formulate the object to submit to your backend API server (after successful form validation).
  
  

• `event.preventDefault()`: This method prevents executing the default behavior of the event. For instance, when called after a form `submit` event, it prevents submitting the form data to the current page/url (which is the "default" behavior of the `submit` event).
  
  You can then write code logic to decide how to handle the event instead (such as formulating a JSONified JavaScript object to submit to your backend API server somewhere.)
  
  
• `event.stopImmediatePropagation()`: This stops the other similar event listeners from being called (which, by extension, stops their event handlers from being executed.)
  
  For instance, you may have more than one `onclick` event listener on a button element. If you call `event.stopImmediatePropagation()` in one of the attached event handlers, none of the other event listeners on the button element will be triggered after that.
  
  In essence, this stops all other similar event listeners on the same element or other elements that will, of necessity, be traversed as the `click` event propagates through the DOM.
  
  Here is a simple example:

    <button onClick={getUserInfo} onClick={getUserPreferences} onClick={getUserPhotos}> Get User Data </button>
    

    function getUserInfo(e){
            e.stopImmediatePropagation()
            //  This now stops the event listeners for the `getUserPreferences()` 
            //  and `getUserPhotos()` handlers from propagating in the DOM
            
            // 1. Make an API call to get the user data
            // 2. Make another API call to get the user's preferences
            // 3. Make a third API call to get the user's photos
        }
        
    

Browser Event Names

14. How Events are Handled in React

• you bind an event listener to an event handler function like this:

    <button onclick="handleButtonClick()"> Click Me! </button>
    

• your event handler (whether inline or an external function) is passed to the event listener in a pair of single curly `{}` braces.

    <button onClick={handleButtonClick}> Click Me! </button>
    

    <button onClick={() => alert("You clicked me!")}> Click Me! </button>
    

• Listening for and handling multiple (different) events on the same HTML element; OR
  
  
• Listening for and handling multiple instances of the same event on the same element.

14.1 Listening for and Handling Multiple Events on the Same Element

    <button onClick={handleClick} onMouseOver={changeColor}> Test Me </button>
    

1. when a user moves his/her mouse over the button, the `onMouseOver` event listener calls the `changeColor()` event listener (function) which (judging by the name of the event handler) will change the color of the button or its text (depending on the logic implemented inside the `changeColor` event handler.)
   
   
2. when a user clicks on the button, the `onClick` event listener calls the `handleClick()` event handler (function) which does something (depending on the developer's coded logic) that reacts to/handles the click event on the button.
   
   

14.2 Multiple Instances of the Same Event on a Single Element

    <button onClick={startChatSession} onClick={notifyParticipants}> Start Chat </button>
    

    <button onclick="startChatSession()" onclick="notifyParticipants()"> Start Chat </button>
    

    function startChatSession(){
        // handle click logic
        console.log("Start a WebRTC chat session.")
        // In real life, you would use the WebRTC API to start a chat session
    }
    
    function notifyParticipants(){
        // handle focus logic here.
        console.log("Call an API to send a message to each participant.")
        //  In real life, you would call an endpoint on your backend API server
        //  to notify the current user's friends to join the chat.
    }
    
    

    <button 
        onclick="console.log('You clicked me!')" 
        onfocus="alert('Hey, you focused on me.');"
    > Let's Interact 
    </button>
    

    <button 
        onClick={(e) => console.log(`You clicked on the ${e.currentTarget.tagName} tag!`)} 
        onFocus={() => alert('Hey, you focused on me.')}
    > Click Me </button>
    

15. Manually Listening for and Handling Events

• `addEventListener()`: definition. signature. Example
  
  
• `removeEventListener()`: definition. signature. Example

16. React Native Events

• Calling React Native functions from native (events)
• iOS Native UI Components - Events
  
  
• Android Native UI Components - Events

17. Best Practices for Handling Events in React

• Handle simple event logic inline: If all you need to do is set your component's (local) state to the new value of an input element, for example, you can do that as a one-liner inline. You won't need to define an external function just to call `setFirstName(e.target.value)`, for example.
  
  
• Move complex event handling logic to an external function: If your event handling logic needs more than a few lines of JavaScript to implement cleanly, please, use an external function.
  
  For example, once a user clicks on the `submit` button of your form, you want to collect the values entered into the various form fields into a JavaScript object, JSONify it and then make a call to your backend API server to submit the form data.
  
  That's more than you want to put in an inline event handler. Settle for simplicity and cleanliness and opt for an external function.
  
  
• Use one event handler per event: Unless you have a very good and practical reason for not doing so, use one event handler to handle the logic for only one event.
  
  And, that applies even if you are listening for multiple instances of the same event on a single element. Or, even if you are listening for different event types on the same element.
  
  Keep the logic for only one event in an event handler. Don't create a code smell just because you want to "conserve" lines of code in your React app. Trust me, it won't be worth it.
  
  
• Name your event handlers logically and unambiguously: As you read more and more codebases of developers, you will start wondering how they passed the "code review" process (if any) at their company.
  
  Name your external event handler function clearly.
  
  Will the event handler be taking care of submitting the form, call the function `handleFormSubmit`.
  
  Does a button trigger the download of new stock prices when clicked on? DON'T call it `handleClick()`; instead call it the `downloadNewStockPrices()` function. And, so on.
  
  Does a function handle reacting to changes in the blog title? You can call the event handler `handleTitleChange()`, but not just `handleChange()` (which would be ambiguous, since we don't know if that handles changes to the blog post's title or the body of the blog post.)
  
  Name your event handlers such that your fellow developers (and future ones lucky enough to be charged with updating and maintaining your codebase) won't need a cheatsheet for what function handles which event in your component.
  
  Make a developer's life easy and save them some embarrasment on that daily "Sprint Call".
  
  
• Don't make your event handlers namesakes of your built-in event listeners.
  
  Developers can get very lazy and very uncreative sometimes. Some go as far naming the event handler function after the event listener. So, they would name the event handler for the `click` event as `onClick()`.
  
  To a newbie developer, they may not know if the `onClick` property on that `<button onClick={onClick}>` is the event listener or so-named because the (event handling) function it is referencing is so-named.
  
  Be a little creative with your naming conventions so that less-experienced devs have fewer opportunities to mess up or mis-learn proper coding etiquettes.

18. Technical Reference

• "React Developer" Newsletter: Sign up for my weekly servings of all things React. Plus, get a free 5-part email course on signup.
  
  
• Web Events Reference
  
  
• Common Components and React Event Listeners: A Reference
  
  
• Responding to Events (in React)
  
  
• Common Event Categories:
  
  
  • Window Events
    
    
  • Document Events
    
    
  • HTMLElement Events
    
    
  • HTMLFormElement Events
    
    
• Event API
  
  
• EventTarget API