Events in JavaScript
Tags: javascript
Published: 2020-02-23 21:12:12

An ***event*** in JavaScript is when something triggers an action on the web page. An example of that "something" can be clicking on a word and then the "action" can be changing the color of the word.

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

Events can occur when a user loads up a page, clicks on a button, press a key, etc. These are all examples of user-generated events. In order for the web page to know you want to create an event, you need to let JavaScript know what trigger to "listen" for. Luckily for us, JavaScript have a function that is created for the purpose of listening for those triggers.

<code>***addEventListener()***</code>

This function takes in ***two*** arguments, the event to listen for and the second argument being the what action(s) to take once that event is triggered.

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

In the code above, the event is triggered when you ***click*** on something and then it will display the "*Don't click on me*" message each time it is clicked on.

But wait, how does it know when or where to run this function?

It's simple! You just need to do a little bit of ***DOM Manipulation***. If you want to learn more about basic ***DOM Manipulation*** or get a quick refresh, see link below for more information. 

[A Beginners Guide To DOM Manipulation](https://dev.to/iqramqra/a-beginners-guide-to-dom-manipulation-45bk)

Let's use this page as an example to show how it works. I will be using the built-in console of Google Chrome to demonstrate this example.

[Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools)

First, find the object you want to manipulate. We can do that by opening the web browser console.

Windows: <code> Control + Shift + J </code>
Mac: <code> Command + Option + J </code>

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

Once the DevTools is opened up, click on the arrow button circled above and then click on the title of this blog to inspect the element. 

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

You should get something similar to the image above back. That will be the object we'll be manipulating and adding an event to.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/391ybbokqu1rr8e4d7io.png)

Now we move onto the console tab and start writing code to find the title. One way of finding the title is with <code>querySelector()</code>. To use this function, you need to pass in the class name of the *HTML tag* that the title is in and then <code>querySelector()</code> will return the first *HTML tag* that matches the search. 

* you can also pass in an id name when using <code>querySelector()</code> but for this example, it's under a class name so we passed in the class name.
* <code>getElementByClass()</code> is another way.

Once that's all done, we can finally start adding event(s) to make the web page more interactive. In my example, I saved my search to a variable <code>*findTitle*</code>. 

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

Now, all I have to do is call the <code>addEventListener()</code> that I created earlier to the <code>*findTitle*</code> variable. Every time you click the title, it will return the message "*Don't click on me*". 

* if you're really bored, just click it 50 times like I did.

Okay, let's do something more interesting than clicking it and seeing increment of the same message. Let's change the color of the title to a different color when you click on it. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1upw5qkq6iou0uds6109.png)

Instead of having it <code>console.log()</code> a message, we can change it to changing the color of the style.

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

When you click on the title now, you should see the title with red font now. You can add more actions to it such as changing the style of the font, size, etc.

Event triggers aren't limited to just a click of the mouse. There are many others such as key press, scrolling, and etc.

[Other Event Triggers](https://data-flair.training/blogs/javascript-event-types/)

One thing to note is that these changes are client-sided and won't affect how this web page is saved on the server. Once you refresh this page, the color of the font will revert back to its default color.