Tuesday , 18 June 2019
Home / Programming / JavaScript / Events – JavaScript Tutorial

Events – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

One of the more powerful features in JavaScript are events. By default, there are a couple of events you have access to thanks to the HTML DOM. Let’s learn a couple of these events.

Unobtrusive JavaScript

I’ve talked about this before, but to refresh your memory I’ll say it again. Some events can be used directly inside HTML elements. While this can be useful, it’s considered bad practice. You should always separate design and functionality. This is why we’re doing everything in a separate script instead of directly writing it inside the HTML document. It also makes your code cluttered if you combine the 2. Luckily, you can access these events outside of the script with HTML DOM.

First, let’s update the <body> tags inside our HTML document to this.

Click Events

Each of these header tags will have special events assigned to them. Our first header will react when someone clicks on it. To do this, we use the onclick event. Accessing this event is easy. Clear your script and add this bit of code.

The first line is nothing new. It simply grabs the first header by it’s ID. Next, we access the onclick event using the keyword onclick. It’s value will be an anonymous function. What’s an anonymous function? An anonymous function is simply a function that doesn’t really have a name.

It runs when it’s directly accessed. The benefit is that you don’t have to worry about conflicting names. The con is that you can’t access the function outside of where you defined it. However, it’s perfect for events.

Inside our function, we simply alert out a message. Try refreshing your page and click on the first header. You should see it working.

Mouse Over & Out

The onmouseover detects when a user’s mouse is over a certain element. Let’s take a look at how to use this. Add this bit of code into your script.

Just like last time, we’re grabbing the header element with the ID boo. Next, to to access this event, you we access the onmouseover property. After that, it’s the same procedure. This time, it changes the text inside the element.

After you remove your mouse, the message doesn’t change back. This is because the event triggers when your mouse is over the element. After that, the change becomes permanent. To reverse this effect, you use the onmouseout event. Add this bit of code.

Mouse Down and Up

There’s also an event for when you hold your mouse down. Add this bit of code into your script.

The onmousedown event is triggered  when your mouse is pressed down on an the header element with the ID moo. Once again, the changes are permanent so we have to account for when the user releases the mouse button. So, you use the onmouseup event to undo the changes.

Refresh your page and you should see all the events working properly. One thing to note, when you press your mouse down on the 3rd element and you move your mouse away from this element, then the onmouseup event will not occur.


There a couple more events, but these are the main ones. We’ll take a look at more in future tutorials. If you would like to read more information about events, then go here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.