JavaScript Tutorial Series: Introduction to JavaScript events.
Published: 2023-03-23 21:08:25

## What is an event?
An event occurs in the browser whenever an element undergo a change in state as a result of user or browser activity. Events are linked to specific elements in the Document Object Model (DOM). For example a user clicking on a button and changing the `<body>`'s background color.


## What is event handling?
Event handling is the process by which JavaScript code responds to events. The event handler in this scenario refers to the code itself. The act of resizing a window when a user clicks a button is an example of event handling. JavaScript contributes to a web page's interface being responsive to events.

Event listeners are another name for event handlers but they're a little different. While event handlers carry out the action in response to the event, event listeners watch for any events.

{% codepen https://codepen.io/fullstackjo/pen/xxamKzg %}

## How does this work?

`addEventListener()` is a method that registers an event handler in order to define the code that will be run once the button is clicked.

- First, we selected the button using `querySelector()` method.
- Second, we defined a function called `changeBackground` that has 3 random numbers between 0 and 255 assigned to three different variables which then are passed to the `rgb` function of the `backgroundColor` of the `<body>`.
- Lastly, The changeBackground() function will be called when users click the button by registering an event handler using the addEventListener() function.

## Event bubbling & Event Capturing

- According to the event bubbling model, an event begins at the element that is the most specific before moving upward toward the element that is the least specific.The event is bubbled up to the window object in modern web browsers.

- An event begins at the least specific element in the event capturing model and moves down toward the most specific element.


![Event capturing and event bubbling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmwuxjfmzhr9u8aicwhp.png)

## Event flow 
The Event flow has three phases
- Event capturing takes place first, giving the chance to intercept the event.
- Then, the event reaches the target.
- Lastly, event bubbling takes place which then allows a final response to the event.

## Event Object
The browser creates an event object, fills it with information, and passes it as an argument to the handler whenever an event occurs. Only within the event handler is the event object accessible.

```HTML
<button>Click!</button>
```

```JavaScript
let btn = document.querySelector('button');

btn.addEventListener('click', function(event) {
    console.log(event.type); //click
});
```
There are a lot of properties that can be used with the event object. We're going to discuss Two of them. 

## preventDefault()
Use the `preventDefault()` method to stop an event from acting by default. For example this method can stop the page from refreshing itself after click the submit button inside a form.

The event continues to bubble up the DOM even after calling the `preventDefault()` method. And if an event's `cancelable` property is true, it can be stopped.

## stopPropagation()
The propagation of an event through the DOM tree is abruptly stopped by the `stopPropagation()` method. It does not, however, alter the default behavior of the browser.