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