DOM Event Listeners
Tags: javascript, dom, webdev
Published: 2021-04-05 21:22:16

JavaScript is probably one of the most reliable and most powerful programming languages. But what takes JS to the next level is the DOM. The DOM stands for **Document Object Model**. In other words, with the DOM you can change the documents structure, style, and content. And with JavaScript doing that is very easy. Most of the websites that you use in your everyday life use JS. And they manipulate the DOM through it.

In this post, I am going to talk about the different ways you can add **DOM Event Listeners**. They allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).

Let's start with our first type of event.

# Inline Events

This is not an ideal way to add Event listeners. Here the event is specified with a function as an attribute to the HTML tag. So let's say for example we want to add an event to our `h1` tag that console logs a `Hello World!` when pressed. We just have to add an `onclick` event. This adds an event when an element is clicked. This is how it would look like:

```
<h1 onclick="console.log('Hello World!')">Click me</h1>
```

If you want something more fun, you can add a function to be executed when pressed. So let's create our `greet()` function.
```
function greet(){
    console.log('Hello World!');
}
```
Now let's add it to our `h1`
```
<h1 onclick="greet()">Click me</h1>
```
There are better ways to add an event listener. Again, this isn't an ideal way, because it can be overwritten. But it's good to keep in mind. You can also add the `onclick` event through JS.

First, you have to make a function, because **the code always has to be in a function in order to work!**

Now we have to select our `h1` tag and save it to a variable.
```
let h1 = document.querySelector('h1'); 
```

Now to add the `onclick` event to our `h1` variable, we have to write the variable, then add the event, and finally pass in the function that we want to be executed.
```
h1.onclick = greet;
```
As you can notice, we don't need to add parentheses`()`. Now whenever we press our `h1`, we will get a console log that says `'Hello World!'`.

# addEventListener

This is the best way to use event listeners. It is more diverse and it's easier to use once you get more used to it.

You just have to select the element to which we want to add an event listener, then we add the `addEventListener` to it and in its parenthesis, we add two arguments. The **first argument is the type of the event**, and the **second one is the function that we want to run**.

Let's make our greet function run when our `h1` tag is clicked. This is how it should look like:

```
h1.addEventListener('click', greet);
```
As you can see, just like the `inline event` we didn't need to add parenthesis to our function. We could also create a function inside the event listener.
```
h1.addEventListener('click', function(){
	console.log('STOP CLICKING ME!')
})
```

If you have an event that only needs to be triggered when pressed only by one element, then add the function in the event listener. There won't be a need to make a specific function outside of it that you will need to call again in another event.

`addEventListener` can run two functions at the same time, while `onclick` gets overwritten by the last function. So if we make a function called `name` that console logs our name, and then a `hello` function that console logs the string `"Hello"` we can call them both at the same time.

```
h1.addEventListener('click', hello);
h1.addEventListener('click', name);
```

After we press the `h1`, we will see this in our console:

```
-> "Hello"
-> "DevDojo"
```

`addEventListener` has more options as well. For example, we can run the event only once, and then actually make it remove the event listener by itself. This is done pretty easily. We just have to add a **third argument**. We cover it in curly braces. In those curly braces, we add the keyword `once` and then put a colon and put the boolean `true`. 
```
h1.addEventListener('click', greet, { once: true });
```

This is one of the many options `addEventListener` has. 

# Conclusion

I would recommend using `addEventListener` because it is more secure and it is much more diverse. This is what almost everyone uses. But it's good to know the other ways you can add event listeners.

I hope this post has helped you and I would love to hear some feedback from you. Make sure to follow me on [Twitter](https://twitter.com/bo_iliev21) and get in touch with me.