Friday , 17 November 2017
Home / Programming / JavaScript / Events – JavaScript Tutorial
Events
Events

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.

Conclusion

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.

https://developer.mozilla.org/en-US/docs/Web/API/Event

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link