Understanding Events- Part 1

Before diving into the technicalities of it, let’s take a real-life example to visualize it better!

This is a Traffic Signal. I know it’s obvious.

When the signal is red, all the vehicles halt.

When the signal is green, the vehicles move forward.

When the signal is yellow, vehicles slow down.

If you notice in the above situation, the colors of the signals are the various possibilities or ‘events’ and as a result, actions follow according to the occurrences.

….cool, cool but what exactly is an event technically?

Events are occurrences in the system that informs us of the action to be taken.

For example, in the case of a webpage, you click a button, text changes, or if you hover over a button the color changes.

Button click event

There are many different types of events that can occur on the web.

Here is a quick link for event references for a webpage-https://developer.mozilla.org/en-US/docs/Web/Events

Well, so far so good.

The system informs us of action. But, now what? There should be a way to manage it, right?

Here comes, event handlers!

When an event has occurred, we handle it in our code.

First, we have listeners that listen out for the event happening, and secondly, we have event handlers that execute in response to the event.

Source

Let’s understand with an example

In my above code snippet, I have a button. which when pressed changes the button text. The change is handled by the js code below.

Let me break down the flow!

1. In btn, we store the reference to the <button>element.
2. addEventListener() is attached to the button to listen to the event when it is clicked by the user.
3. addEventListener() accepts two parameters- one is the type of event we want to listen to i.e ‘click’ event and secondly, a function to call when the event happens.
4. In the code above, the function changes the text of the button to ‘Button clicked!!🌟.

Adding event handlers-

addEventListener()- It is a preferred way for adding event handlers on the web pages. It takes in two parameters-

• name of the event we want to register the event handler for. For example, it can be ‘click’, ‘mouseover’, ‘mouseout’.
• handler function which runs as a response to it.

An alternate way to write a handler is by using a named function like the one below-

Using a named function over an anonymous function makes the code organized.

Removing event handlers-

removeEventListener() is reverse of addEventListener(). It stops the code from ‘listening’ to an event. Similarly, it accepts two parameters - event type and event handler function.

Why do we need removeEventHandlers()?

You might have a question that when exactly we would need removeEventListener() because so far we were revolving around the fact we should ‘listen’ to the events fired from the system.

It's a good practice to remove event listeners if we don’t have any such usage.

• Cleaning up references used in listeners that we don’t need anymore. For example, if we have some references which we don’t need anymore after a specific event is done, we should clean them up to avoid memory leaks.
• If we want to listen to an event only once then we should clean it up. For example, if a button colour changes after the ‘mouseover’ then we can use removeEventListener to dismiss further calling of the event handler.

Hurray! 💃🏻 You completed the first hurdle of understanding events

Disclaimer- Events aren’t restricted to web pages only or specifically it’s not unique to Javascript only. Most programming languages have some kind of event model, and the way the model works often differs from JavaScript’s way. In fact, the event model in JavaScript for web pages differs from the event model in JavaScript as it is used in other environments.

Closing Thoughts

Part 1 mainly focused on the basics of events and event handlers. The next part would extensively cover more of the events! Till then feel free to play around with my code- https://github.com/rajashree23/events :D