DOM Event Listeners

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.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

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!'.

Event Listeners

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 and get in touch with me.