The Javascript Events

When and Where are the events?

This might be one's thoughts as a newbie to programming and the Javascript language, and certainly, it is an excellent and right question.
But the javascript events are not the regular and usual events you’re probably used to, they don’t take place physically or virtually instead they occur in the IDE to interact with the interface of any website, web application, or software built with javascript. For example, this medium platform.

Press enter or click to view image in full sizeThe JS EVENTS image By Yasir Gaji

Interacting with the interface is where events come in, in order to listen on absolutely anything in the DOM using the .addEventListener() keyword and to execute a function after listening to the event, if it seems complex, do not worry I would do justice to that and by the end of this article, you should understand.

Making use of this interface and its Html collection we would learn the types of javascript events cases we have and how best to use them.

First Stance

We would look into the Event Listeners and the Event Object.

Event Listeners

These are basically the most important aspects of the javascript event these do exactly as they imply, they listen to events that happen on the selected node/element in the Html collection to trigger certain functions, and we can definitely listen on any DOM event methods.

For example, let’s listen to the click event on a specified node/element in the provided Html collection of our interface

Code representation of how event listers work by Yasir Gaji

These few lines of code select the node with the clear-form class name from the Html collection and adds an event listener to it, which takes in two parameters, the click event and the named function clearForm. This implies that once the node/element with the selected class name is clicked the clearForm function would execute.

Event Object

Code representation of how to get the events object By Yasir Gaji

Just as is in the initial code representation we listen for the click event on the selected query from the Html collection and we execute the assigned function once the event happens, but here the function would print out the events object in the console.

Press enter or click to view image in full sizeImage of the console showcasing the event object By Yasir Gaji

this opens room to select any parameter within the object for manipulation when building, for instance, we can target the path or target parameter (which represents the element the event happened on) within the event object using e.path and e.target respectively.

Second Stance

We would look into the Mouse Events and Keyboard & Input Events

Mouse Events

In the first instance the mouse event click was used to introduce the topic but in this section, I would introduce more mouse event instances.

We have: dblclick — The double click event,
mousedown — The mouse down event(click and hold),
mouseup — The mouse up event(similar to click event but not, this fires when hands-off the mouse),
mouseenter — The mouse enter event(this fires off once the mouse hovers its target),
mouseleave — The mouse-leave event(this gets triggered once the mouse leaves the specified environment),
mouseover — The mouse-over event(this is similar to mouse enter event but this fires off only when in the parent target),
mouseout — The mouse out event(similar to the mouse leave event but this doesn’t take effect on a child node/element of the target),
and mousemove — The mouse move event(this gets triggered when the mouse moves within and around its target)

To mention a few, these mouse events can be put in place of the click event to make more dynamic functionalities when building with javascript.

Keyboard & Input Events

As you probably guessed these are events based on keyboard activities and there are quite a few of these events as well.

Code representation of dynamic rendering of the keyboard & input event by Yasir Gaji

These few lines of code would print every single input in the console, and this is possible as a result of listening for the keydown event then pick and parse each input value into the console.

We have more keyboard events like: keyup — The key up event(this performs similarly like the key down but only executes hands-off the key), and
keypress — The key press event(unlike the key up and key down event this goes off immediately once the key has been contacted it is my most preferable key event).

We as well have some inputs events like: focus — The focus event(this is when the inside of the input field is clicked before typing), and blur — The blur event(this is when the outside of the input field is clicked) just to mention a few.

Third Stance

We would look into the Events Bubbling and Events Delegation

Events Bubbling

This is the bubbling up of an event of a selected node/element to its parent node/element from the DOM.

Events Delegation

This is when we implement logic on the event of a selected node/element to retarget its child node/element.

Conclusion

When building with javascript the Events would come into play and it is important to grasp their core. They can be implemented directly or dynamically into projects. Do ask questions for clarifications and make corrections & suggestions, I expect them.