They’re Always Listening

4 min readOct 29, 2020

Be sure to check out more of my blogs here and follow me on LinkedIn here.

Do you ever get that spooky feeling that someone is watching you? Sometimes even listening in on your conversations? Well, I’m sure google hears everything but we’re here today to talk about how a web page can listen to everything you do. From clicking on buttons to constantly watching where the mouse is many modern websites are built to change depending on how you interact with them. This is all based on the javascript frontends of the website but relies heavily on a framework called React. Developed by the super-smart people at Facebook, React takes in all event listeners from any browser and interprets them into some simple and easy to use commands. The simplest of these commands is the onClick function.

Example of the onClick function

OnClick

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.

OnSubmit

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.

onKeyDown

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.

onMouseOver

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.

Conclusion

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.