Event Handlers

I. What is event handler?

Event handlers allow users interact with our website and do something when a certain event such as a click or a hover happens.

II. Adding Event Handlers

To add an event handler to a React Element, assign the event handler method to the appropriate event attribute.

<button onClick={() => console.log("I was clicked!")}>Click me</button>

We can also use a seperate function:

import React from "react"

function handleClick() {
    console.log("I was clicked")
}

function App() {
    return (
        <div>
            <h2>Hello</h2>
            <button onClick={handleClick}>Click me</button>
        </div>
    )
}

export default App

III. Supporting events in React

React supports several events:

  • Clipboard Events
onCopy onCut onPaste
  • Composition Events
onCompositionEnd onCompositionStart onCompositionUpdate
  • Keyboard Events
onKeyDown onKeyPress onKeyUp
  • Focus Events
onFocus onBlur
  • Form Events
onChange onInput onInvalid onReset onSubmit
  • Generic Events
onError onLoad
  • Mouse Events
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
  • Pointer Events
onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut
  • Selection Events
onSelect
  • Touch Events
onTouchCancel onTouchEnd onTouchMove onTouchStart
  • UI Events
onScroll
  • Wheel Events
onWheel
  • Media Events
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting
  • Image Events
onLoad onError
  • Animation Events
onAnimationStart onAnimationEnd onAnimationIteration
  • Transition Events
onTransitionEnd
  • Other Events
onToggle