I Always Feel Like Somebody’s Watching Me…and It’s the JS Events
What is a JavaScript event and why is it watching me? Well, the fact that you are reading this right now means that Javascript is listening and is aware of what you are doing in the browser. I know that can sound kind of creepy, but trust me, you want it to listen in and I’ll tell you why…
“JavaScript’s interaction with HTML is handled through events that occur when the user or the browser manipulates a page” — tutorialspoint
What is a JavaScript Event?
In a nutshell, events are all of the things that the computer can respond or react to. Notice the keywords respond and react, meaning that it occurs only after something happens. While an event is a change that takes place in the browser from the user, the work that is done in response to the event is called event handling (the second half of that relationship). Although DOM or event handling is not the current focus, it is good to know that events are part of the Document Object Model (DOM) and can be found in every HTML element, where JavaScript is triggered. For the purposes of this article, we can think of the DOM as webpage elements.
Now let’s take a quick peek at some of the common event categories you probably see and use on a daily basis!
Different Types of User Events:
Mouse Events
The mouse is the pointer on display that allows you to move across the screen and transmit your commands to the computer. Mouse events include hovering over an element, selecting text, clicking, double-clicking and right-clicking on the screen to access all of the list of commands without using the keyboard. Whenever you see the webpage being manipulated by these commands, it means that the event was heard and is responding.
Key Press
You guessed it. This is just like the mouse events, but on the keyboard instead. Every time a user strokes a key, it is a key press event. For instance, if you were to click the browser (twice) and press the side arrow keys on your keyboard you should see your cursor responding in the direction you press. Whenever events like keyup, keydown or keypress are handled, we will know which keys are pressed by watching how the screen responds.
View Events
Did you scroll down here to read this part of the article? Well, that was a view event. Any time you scroll a document or resize the view from full screen to a smaller or split screen option, and you see the screen responding, that is also a view event that has been heard by JS.
Media Events
Whenever you’ve turned up the volume on your favorite song, paused it, or played it again, multiple events have fired. Depending on what you click, an event is heard and fired, where the event handler may respond by playing the requested song, letting you know it’s buffering or any other feedback depending on the request.
By listening to your every move (again just in the browser), JavaScript will be responsive and that is always a good thing! You want the browser to listen any time you wish to resize your view, look up restaurant’s ratings, shop online or just see the screen moving vertically when you scroll right? There are several more of these events that gives us the ability to interact with the browser that makes it an enjoyable and intuitive experience.
Check out more information on event listeners below and happy coding!
