Events

What is an event?

An event is an action or occurrence recognized by a software. To make an event more clear let's use the daily activities we do when we use a computer such as clicking on a button, hover on an image, pressing a keyboard, scrolling the mouse wheel and etc. The react documentation has already a detail note about events.

Handling events in React is very similar to handling elements on DOM elements using pure JavaScript. Some of the syntax difference between handling event in React and pure JavaScript:

• React events are named using camelCase, rather than lowercase.
• With JSX you pass a function as the event handler, rather than a string.

Lets check an example first:

Example

function App() {
    const greetPeople = (event) => {
        alert('Welcome')
    }
    return <button onClick={greetPeople}>Welcome</button>
}

However, in React it could be as follows:

Overview

Event Type/Category:	Events:	Event Specific Properties:
Clipboard	onCopy, onCut, onPaste	DOMDataTransfer, clipboardData
Composition	onCompositionEnd, onCompositionStart, onCompositionUpdate	data
Keyboard	onKeyDown, onKeyPress, onKeyUp	altKey, charCode, ctrlKey, getModifierState(key), key, keyCode, locale, location, metaKey, repeat, shiftKey, which
Focus	onChange, onInput, onSubmit	DOMEventTarget, relatedTarget
Form	onFocus, onBlur
Mouse	onClick, onContextMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit, onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp	altKey, button, buttons, clientX, clientY, ctrlKey, getModifierState(key), metaKey, pageX, pageY, DOMEventTarget relatedTarget, screenX, screenY, shiftKey
Selection	onSelect
Touch	onTouchCancel, onTouchEnd, onTouchMove, onTouchStart	altKey DOMTouchList changedTouches, ctrlKey, getModifierState(key), metaKey, shiftKey, DOMTouchList targetTouches, DOMTouchList touches
UI	onScroll	detail, DOMAbstractView view
Wheel	onWheel	deltaMode, deltaX, deltaY, deltaZ
Media	onAbort, onCanPlay, onCanPlayThrough, onDurationChange, onEmptied, onEncrypted, onEnded, onError, onLoadedData, onLoadedMetadata, onLoadStart, onPause, onPlay, onPlaying, onProgress, onRateChange, onSeeked, onSeeking, onStalled, onSuspend, onTimeUpdate, onVolumeChange, onWaiting
Image	onLoad, onError
Animation	onAnimationStart, onAnimationEnd, onAnimationIteration	animationName, pseudoElement, elapsedTime
Transition	onTransitionEnd	propertyName, pseudoElement, elapsedTime