• Choose a category
• All
• Classic-Fiction

click

mouseover

mouseout

keypress

load

submit

As you can see, there are two categories of events: things the user of your site does, and things that the browser does. In the above list, the user performs the click, mouseover, mouseout, and keypress events. The browser fires the load event when the page has finished loading, and the submit event when the user clicks a submit button (so it's almost a user-perfromed events).

Adding Event Handlers

An event is fired on a given DOM element. This means we can wire up an event handler (or event listener) to a given element. An event handler is a function that will be executed when a given event is fired. Let's look at an example:

Example 5.13

//

var btn = document.getElementById("some_button");

function welcome_user(evt) {

alert("Hello there!");

}

btn.addEventListener("click", welcome_user, false);

(Note: you'll have to run this example in a browser other than Internet Explorer; we'll resolve this soon.)

What's going on here? Well, the first bit is stuff you're getting used to: getting an element and creating a function. Next, we're calling the element's method addEventListener. You can probably guess what an event listener does: it "listens" for an event and executes a function when that event occurs. The addEventListener takes three parameters. The first is the type of event we're listening for; in this case, it's a click event. The events in the sample list above are all valid events as well, and you can find the rest at that Wikipedia page.

The next parameter is the function to run when that event is fired. In this case, we're passing in the welcome_user function. We could also pass in an anonymous function, if we wanted to. The final parameter decides whether to use capturing or bubbling. This requires a short rabbit-trail on the difference between capturing and bubbling.

First off, note that Internet Explorer 8 and below support bubbling only (IE9 and up support both bubbling and capturing), so you'll probably use that 99% of the time. Now, check out this HTML:

Let's say I click the span. Because the span is inside the div, when that span gets clicked, the div is clicked as well. So both elements have a click event fire on them. If both have an event handler to harness that event, which one should be executed first? That's the background of capturing and bubbling. The DOM standard says that events should capture first, bubble second. The capture phase is when the event starts at the highest element and works down. In this case, the click handler of div will fire first. Once the event reaches the bottom—or the innermost element—it will then bubble. The bubble phase takes the event from the bottom and brings it back to the top, element by element. To remember which is which, remember that bubbles float up, just like events in the bubbling phase.

So, back to addEventListener. That last parameter is whether to handle the event in the capture phase or not. Because IE (before 9) doens't support capturing, it's usually false (which means bubbling).

But it's more than bubbling that IE doesn't support. Before version 9, IE had it's own event model (that model is still supported in IE 9, but it supports the standard model as well). Let's check that out.

It's actually pretty simple:

Example 5.14

//

var btn = document.getElementById("some_button");

function welcome_user(evt) {

alert("Hello there!");

}

btn.attachEvent("onclick", welcome_user);

Instead of addEventListener, they user the method attachEvent. You'll notice that there's no third parameter (because it only supports bubbling). The other difference is that the event name must be prefixed with the word "on." Other than that, there's not much difference.

Removing Event Handlers

If you want to add event listeners, you'll eventually want to remove them.