Types of Event Listeners in React (Quick-Read)

Unlike vanilla JavaScript where addEventListener is used to add event listeners to the DOM element after the element is created, React makes it easier. Simply add a listener when the element is initially rendered, like-so:

function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}

return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}

As you can see onClick={handleClick} calls on the above function handleClick and console.log’s: ‘The link was clicked’.

Some of the many types of event listeners in React include:

Keyboard Events:

onKeyDown — Called when a key is depressed

onKeyPress — Called after a key is released (before onKeyUp is triggered)

onKeyUp — Called last, after a key is pressed

You can also check if a modifier key was pressed at the time of an event with these properties (each are booleans):

altKey

ctrlKey

metaKey

shiftKey

Form Events:

onChange — Called when the user changes value in form control

onSubmit — Called when submit button or return is pressed

Mouse Events:

onClick — A mouse button was pressed and released (called before onMouseUp)

onMouseDown — A mouse button was depressed

onMouseUp — A mouse button was released

onContextMenu — The right mouse button was pressed

onDoubleClick — Triggered by double click

onMouseEnter — Mouse moves over an element

onMouseLeave — Mouse leaves an element

onMouseOver — Mouse moves directly over an element

Here’s a fantastic live example resource for React events

--

--

Full-stack developer. Alumna of Flatiron School's Software Engineering Immersive bootcamp. Portfolio: https://tiffany-codes.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store