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>
);
}

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

Keyboard Events:

Form Events:

Mouse Events:

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

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