Events in JavaScript

by kirupa   |   13 July 2014

In case you haven't noticed, most applications and web sites are pretty boring when left alone. They launch with great fanfare and gusto, but the excitement they bring to the table goes away very quickly if you don't start interacting with them:

can we go home?

The reason for this is simple. Your applications exist to react to things that you do to them. They have some built-in motivation when you launch them to get themselves out of bed and ready for the day. Everything else that they do afterwards depends largely on what you tell them to do. This is where things get really interesting.

The way you tell your applications what to do is by having them react to what are known as events. In this tutorial, we will take an introductory look at what events are and how you can use them.

Onwards!

What are Events?

At a high level, everything you create can be modeled by the following statement:

 

when something happens

 

You can fill in the blanks in this statement in a bajillion different ways. The first blank calls out something that happens. The second blank describes the reaction to that. Here are some examples of this statement filled out:

examples

This generic model applies to all of the code we've written together. This model also applies to all of the code your favorite developer/designer friends wrote for their applications. There is no way of escaping this model, so...there is no point in resisting. Instead, you need to learn to embrace the star of this model, the very talented critter known as the event.

An event is nothing more than a signal. It communicates that something has just happened. This something could be a mouse click. It could be a key press on your keyboard. It could be your window getting resized. It could just be your document simply getting loaded. The thing to take away is that your signal could be any hundreds of somethings that are built-in to the JavaScript language...or custom somethings that you created just for your app alone.

Getting back to our model, events make up the first half:

where events fit into all of this

Events define the thing that happens. They fire the signal. The second part of the model is defined by the reaction to the event:

reaction

After all, what good is a signal if there isn't someone somewhere that is waiting for it and then takes the appropriate action?! Ok - now that you have a high level overview of what events are, let's dive into how events live in the nature reserve known as JavaScript.

Events and JavaScript

Given the importance of events, it should be no surprise to you that JavaScript provides you with a lot of great support for working with them. To work with events, there are two things you need to do:

  1. Listen for events
  2. React to events

These two steps seem pretty simple, but never forget that we are dealing with JavaScript here. The simplicity is just a smokescreen for the depth of the trauma JavaScript will inflict upon you if you take a wrong step. Maybe I am being overly dramatic here, but we'll find out soon enough.

1. Listening for Events

To more bluntly state what I danced around earlier, almost everything you do inside an application results in an event getting fired. Sometimes, your application will fire events automatically such as when it loads. Sometimes your application will fire events as a reaction to you actually interacting with it. The thing to note is that your application is bombarded by events constantly whether you intended to have them get fired or not. Our task is to tell your application to listen only to the events we care about.

The thankless job of listening to the right event is handled entirely by a function called addEventListener. This function is responsible for being eternally vigilant so that it can notify another part of your application when an interesting event gets fired.

The way you use this function looks as follows:

source.addEventListener(eventName, eventHandler, false);

That's probably not very helpful, so let's dissect what each part of this function means.

The Source

You call addEventListener via an element or object that you want to listen for events on. Typically, that will be a DOM element, but it can also be your document, window, or any other object that just happens to fire events.

The Event Name

The first argument you specify to the addEventListener function is the name of the event you are interested in listening to. The full list of events you have at your disposal is simply too large to list here (go here instead), but some of the most common events you will encounter are:

Event Event is fired...
click ...when you press down and release the primary mouse button / trackpad / etc.
mousemove ...whenever your mouse cursor moves
mouseover ...when you move the mouse cursor over an element. This is the event you would use for detecting a hover!
mouseout ...when your mouse cursor moves outside the boundaries of an element.
dblclick ...when you quickly click twice.
DOMContentLoaded ...when your document's DOM has fully loaded. You can learn more about this event in the following tutorial.
load ...when your entire document (DOM, external stuff like images, scripts, etc.) have fully loaded.
keydown ...when you press down on a key on your keyboard
keyup ...when you release a key press on your keyboard
scroll ...when an element is scrolled around
wheel &
  DOMMouseScroll
...everytime you use your mousewheel to scroll up or down

In subsequent tutorials, we will look at a lot of these events in greater detail. For now, just take a quick glance at the click event, for we will be using that one in a few moments.

The Event Handler

The second argument requires you to specify a function that will get called when the event gets overheard. This function is very affectionately known as the event handler by friends and family. You'll learn a whole lot more about this function in a few moments.

To Capture, or Not to Capture, That Is the Question!

The last argument is made up of either a true or a false. To fully help you understand the implications of specifying either value, you are going to have to wait until the the Event Bubbling and Capturing in JavaScript tutorial. This tutorial happens to be next in this series, so you won't be waiting long.

Putting It All Together

Now that you've seen the addEventListener function and what it looks like, let's tie it all up with an example of this function fully decked out:

document.addEventListener("click", changeColor, false);

Our addEventListener in this example is attached to the document object. When a click event is overheard, it calls the changeColor function (aka the event handler) to react to the event. This sets us up nicely for the next section which is all about reacting to events.

2. Reacting to Events

As you saw in the previous section, listening to events is handled by addEventListener. What to do after an event is overheard is handled by the event handler. I wasn't joking when I mentioned earlier that an event handler is nothing more than a function:

function normalAndBoring() {
    // I like hiking and puppies and other stuff!
}

The only distinction between a typical function and one that is designated as the event handler is that your event handler function is specifically called out by name in an addEventListener call:

document.addEventListener("click", changeColor, false);

function changeColor() {
    // I am important!!!
}

Any code you place inside your event handler will execute when the event your addEventListener function cares about gets overheard. It's all pretty simple!

A Simple Example

The best way to make sense of what we've learned so far is to see all of this fully working. To play along, add the following markup and code to an HTML document:

<!DOCTYPE html>
<html>
<head>
    <title>Click Anywhere!</title>
</head>
<body>
    <script>
        document.addEventListener("click", changeColor, false);

        function changeColor() {
            document.body.style.backgroundColor = "#FFC926";
        }
    </script>
</body>
</html>

If you preview your document in the browser, you will initially just see a blank page:

a blank page

Things will change you when you click anywhere on the page, though. Once you've completed your click, your page's background will change from being white to a yellow-ish color:

a blank and yellow page

The reason for this is pretty easy to see why. Let's take a look at the code:

document.addEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

The addEventListener call is identical to what you saw earlier, so let's skip that one. Instead, pay attention to the changeColor event handler.

document.addEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

This function gets called when the click event on the document is overheard. When this function gets called, it sets the background color of the body element to a shade of yellow. Tying this back to the very beginning where we generalized how applications work, this is what this example looks like:

tying it all back

If all of this makes complete sense to you, then that's great! You just learned about one of the most important concepts you'll encounter. We aren't done just yet. We let the event handler off the hook a little too easily, so let's pay it one more visit.

The Event Arguments and the Event Type

Your event handler does more than just get called when an event gets overheard by an event listener. It also provides access to the underlying event object as part of its arguments. To access this event object easily, we need to modify your event handler signature to support this argument.

Here is an example:

function myEventHandler(e) {
    // event handlery stuff
}

At this point, your event handler is still a plain ol' boring function. It just happens to be a function that takes one argument...the event argument! You can go with any valid identifier for the argument, but I tend to go with e because that is what all the cool kids do. There is nothing technically wrong with identifying your event as follows:

function myEventHandler(isNyanCatReal) { 
    // event handlery stuff
}

Anyway, the event argument points to an event object, and this object is passed in as part of the event firing. There is a reason why we are paying attention to what seems like a typical and boring occurence. This event object contains properties that are relevant to the event that was fired. An event triggered by a mouse click will have different properties when compared to an event triggered by your keyboard key press, a page load, an animation, and a whole lot more. Most events will have their own specialized behavior that you will rely on, and the event object is your window into all of that uniqueness.

Despite the variety of events and resulting event objects you can get, there are certain properties that are common. This commonality is made possible because all event objects are derived from a base Event type (technically, an Interface). Some of the popular properties from the Event type that you will use are:

  1. currentTarget
  2. target
  3. preventDefault
  4. stopPropagation
  5. type

To fully understand what these properties do, we need to go a little deeper in our understanding of events. We aren't there yet, so just know that these properties exist. You'll be seeing them real soon in subsequent tutorials.

Removing an Event Listener

Sometimes, you will need to remove an event listener from an element. The way you do that is by using addEventListener's arch-nemesis, the removeEventListener function:

something.removeEventListener(eventName, eventHandler, false);

As you can see, this function takes the exact type of arguments as an addEventListener function. The reason for that is simple. When you are listening for an event on an element or object, JavaScript uses the eventName, eventHandler, and the true/false value to uniquely identify that event listener. To remove this event listener, you need to specify the exact same arguments.

Here is an example:

document.addEventListener("click", changeColor, false);
document.removeEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

The event listener we added in the first line is completely neutralized by the removeEventListener call in the highlighted 2nd line. If the removeEventListener call used any argument that was different than what was specified with the corresponding addEventListener call, then its impact would be ignored and the event listening will continue.

Conclusion

Well, that's all there is to getting an introduction to events. Just rememter that you have your addEventListener function that allows you to register an event handler function. This event handler function will get called when the event your event listener is listening for gets fired. While we touched base on a few other topics, they will make more sense when we view them in the context of more advanced event-related topics that you will see shortly.

Once you are ready, I recommend you head over to learning more about Event Bubbling and Capturing, Mouse Events in JavaScript, or Keyboard Events in JavaScript.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!