JS Events To Know About

Part of building a dynamic, interactive webpage with Javascript requires using Event Listeners. These are functions or processes that “listen” for certain events or actions to occur in the system you’re programming. By using Event Listeners, the system can tell you that something’s happened, which then let’s you respond to them as desired.

So, with that being said, here are some useful events to keep in mind:

Click:
The click event is fired when the user’s mouse’s is pressed and released on the element with the listener attached. This event is extremely common and useful. As an aside, there is also a dblclick event that is fired when the user’s mouse is clicked twice on an element.

Mouseover:
The mouseover event is fired when the user’s mouse is moved onto the element with the listener attached.

Mouseout:
The mouseout event is fired when the user’s mouse is moved off the element with the listener attached.

Keypress:
The keypress event is fired when the user presses down a key that produces a character value. Keys that produce character values are alphabetical, numeric, and punctuation keys, while keys that don’t produce character values are modifier keys, such as Alt, Shift, and Ctrl.

Keydown:
The keydown event is fired when the user presses down a key. This differs from keypress in that this event is fired for both keys that do and don’t produce a character value.

Keyup:
The keyup event is fired when the user releases a key they’ve pressed.

While these are a few of the more common events you’ll want to get familiar with, there are many more to research and play around with. As you design your webpage, getting comfortable and creative with various Event Listeners will allow you to provide an enjoyable, unique user experience.