The onClick event listener can be added to just about any HTML element when writing a React component. Commonly this is added to a button in order to give it functionality when clicked. In the example above, the shoot function will be triggered when the button is clicked. These helper functions can contain anything from a simple color change to complicated code that completely rerenders the entire page. Don’t let buttons get all the attention though, you can also add the onClick to div, p, h, or any other HTML tags. This could be useful if you want an event to happen if the user clicks on certain areas or titles in your web application. There is also onDoubleClick if you want the user to really have to work for it.
This is the most popular event listener for a form. Instead of adding individual event listeners to each input of a form, you can instead just give this property to the entire form itself. When the form gets submitted you then have access to all the data that was inputted by the user. This can be sent to other helper functions to add information to a database, search for specific information, send emails, and many other things. Forms can also be tagged with any of the following event listeners: onChange, onInput, onInvalid, onReset.
This event listener along with onKeyUp and onKeyPress will be listening for the user to type any key on the keyboard. These events can return what specific key was pressed. Logic can be added to these event listeners which allows actions to be triggered when certain keys are pressed. This can be especially useful when trying to build game applications. Arrow keys can then easily make an on-screen player move around a given game board.
We’re not talking about the mice that eat cheese and live in the sewer here, we’re talking about the mouse on your computer. This event listener does exactly what it sounds like. It will trigger an event whenever the user’s mouse is over that selected element. Simple things would be changing some styling based on what the user is hovering over. You could even add messages and pop-ups related to what the user is hovering over. A good example of this would be if you’re trying to book some concert tickets. When you hover over a show for Post Malone, it could expand showing you exact dates, times, and even some of the best available seats with prices. As soon as your mouse leaves this section, it will all go back to normal. There are quite a few mouse events, being able to use the right one can help you make your web application exactly what you envisioned it.
onCopy & onPaste
These can allow the web application to be listening for the user to copy or paste inside of an element. This could be useful if the application has a large area for the user to type in. Maybe they paste in a paragraph they have previously written on their computer, you could then give them a message saying they successfully pasted in. Likewise, you could also be listening for students writing an essay and give them an unpleasant message if they paste anything in that isn’t their own work.
This is just a small sample of what event listeners you can use on your web application. For a full list of the React, even listeners click here. Event listeners allow for your website to become interactive and lets the page change based on user input and actions. This is very useful and if you have an idea, there is an event listener to handle it.