Hackforge Academy

Explanation

onClick event is triggered when a user clicks on an element like a button. It is commonly used to handle user interactions such as submitting data or updating state.

Code:

<button onClick={handleClick}>Click</button>

Explanation

onChange event is triggered when the value of an input field changes. It is mainly used in forms to capture user input.

Code:

<input type='text' onChange={handleChange} />

Explanation

onSubmit event is triggered when a form is submitted. Usually, event.preventDefault() is used to stop page refresh.

Code:

<form onSubmit={handleSubmit}></form>

Explanation

onMouseOver event occurs when the mouse pointer moves over an element.

Code:

<div onMouseOver={handleMouseOver}>Hover</div>

Explanation

onMouseOut event occurs when the mouse pointer leaves an element.

Code:

<div onMouseOut={handleMouseOut}>Hover</div>

Explanation

onKeyDown event is triggered when a keyboard key is pressed down.

Code:

<input onKeyDown={handleKeyDown} />

Explanation

onKeyUp event is triggered when a pressed key is released.

Code:

<input onKeyUp={handleKeyUp} />

Explanation

onFocus event occurs when an element gains focus, such as clicking inside an input field.

Code:

<input onFocus={handleFocus} />

Explanation

onBlur event occurs when an element loses focus.

Code:

<input onBlur={handleBlur} />

Explanation

onDoubleClick event is triggered when a user double-clicks on an element.

Code:

<button onDoubleClick={handleDoubleClick}>
Double
</button>