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.
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.
addEventListener()
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.
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
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.
First, find the object you want to manipulate. We can do that by opening the web browser console.
Windows: Control + Shift + J
Mac: Command + Option + J
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.
You should get something similar to the image above back. That will be the object we'll be manipulating and adding an event to.
Now we move onto the console tab and start writing code to find the title. One way of finding the title is with querySelector(). To use this function, you need to pass in the class name of the HTML tag that the title is in and then querySelector() will return the first HTML tag that matches the search.
- you can also pass in an id name when using
querySelector()but for this example, it's under a class name so we passed in the class name. -
getElementByClass()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 findTitle.
Now, all I have to do is call the addEventListener() that I created earlier to the findTitle 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.
Instead of having it console.log() a message, we can change it to changing the color of the style.
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.
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.
Top comments (0)