Sign in
Log inSign up

Adding Event listeners

Dominick Ugas's photo
Dominick Ugas
·Oct 19, 2021·

2 min read

Introduction:

Does anyone know here know how to bring some functionality to their website? It's ok not to know the answer because we'll be talking about the basics. There is so much that goes into a website and these cool functions that we call addEventListeners. These bad boys can bring so much functionality into our projects.

car-salesman-slaps-hood.jpg

Creating a project, takes 3 structures: HTML, CSS and JavaScript. HTML is the structure to the website, sort of like a skeleton of a human body. This consists of adding the tags so and whatever text you would like to include on the website. Something you should know about HTML is that this is where you connect JavaScript and the CSS.

CSS

The CSS is where all the magic happens, it's where you can let your creativity run wild and ultimately this is a reflection of who you are.

200.gif

JavaScript

The JavaScript is where you can bring the page to life!

200.gif

Event Listeners

Here you have the liberty of giving all your details some options to do more than just look nice. Here you will be able to give buttons the ability to transform information, submit information and all this is because in a way, they react how you interact or commands you give them. This is thanks to what we call the Event Listeners. They work by being on the lookout of a certain action and when triggered they follow with an execution of a task you gave it.

200.gif

They can be as simple as just sending an alert or it can be as complex as function, within a function, within a function, sort of like strings pulling other strings.

200.gif

These event listeners can be given the task to be looking out for clicks, keys on your keyboard being pressed or even hovering your mouse over a certain part of your screen, pretty smart, don't you think?

image.png