JS events explained with examples
Tags: javascript, beginners, html, css
Published: 2020-10-27 10:16:28

This article is a summary(with examples) of the events page on MDN web docs if you want to study in-depth you can refer [here](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events)

##Table of Contents
1.[What is an Event?](#c1)
2.[Add and remove an eventlistener](#c2)
3.[Types of events](#c3)




## What is an Event? <a name="c1"></a>

Events are actions that happen in a system. The system fires a signal when an event occurs and provides a mechanism to perform a task or activity automatically.

###### Example of event

hovering over an element, clicking, scrolling, etc. 

Each event has an event handler that executes a block of code when an event is fired.

There are two types of events, Browser events, and Synthetic events.

**Browser events** are built-in, predetermined, and are executed by the browser when an action occurs

Examples of browser events are 

*resize* - When a browser window has resized this event it is triggered and the layout is adjusted.

*onmousemove* - This event is fired when the mouse pointer is moved to calculate the new coordinate values of the mouse pointer.

**Synthetic events** - Events created and dispatched by the programmer are called synthetic events. These are custom events.

Synthetic events are created using the [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)
constructor. The syntax for synthetic events is as follows

##### Code - custom event


![custom event code](https://dev-to-uploads.s3.amazonaws.com/i/vcrdu6d9dlnb9vx68g77.png)

##### Output - custom event


![custom event output](https://dev-to-uploads.s3.amazonaws.com/i/n8qzpdxvnkz7w8bte9rn.gif)





## Add and remove an event listener <a name="c2"></a>

For an element in order to respond to various action you need to add an event listener to that element.

**addEventListener()** method is used to add an event listener 

##### Code - add event listener

![add event listener](https://dev-to-uploads.s3.amazonaws.com/i/z5qmcldtbp9sjb89uubi.png)

##### Output - add event listener

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gqlphx5wo2rsfr8g07lu.gif)



**removeEventListener()** method is used to remove an event listener


Both the above methods have the same syntax. It takes two parameters first is the event name and the second parameter is the callback function that needs to be executed. 



## Types of events. <a name="c3"></a>

There are many types of DOM events, some of them are network events, form events, storage events, etc. The most important of them are keyboard events and mouse events. We will look into these both using some examples.

#### Keyboard events :
   There are three events in this category
   1. keydown - when the key is pressed.
   2. keypress- when the key is pressed continuously 
               (except shift, fn, and capslock)
   3. Keyup - When the key is released.




##### Code - keyboard events

![keyboard events](https://dev-to-uploads.s3.amazonaws.com/i/1cqyr83ehb7u6bxk5mto.png)

##### Output - keyboard events

![keyboard events](https://dev-to-uploads.s3.amazonaws.com/i/jhm36aqefh0ft9v91upg.gif)

In the example, you can notice that when I hold 
**ctrl-left** the keydown event is triggered when I release the **ctrl-left** keyup is triggered. The keypress is not triggered because it's not a continuous action, however, when I press **A** all the events are triggered.

You can refer to all other events [here](https://developer.mozilla.org/en-US/docs/Web/Events)


I would recommend checking Event **bubbling and capture**
on the [MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events) it is very well explained.

Thank You for reading this article. Please give your feedback in the comments.