Where/What Happened?

by Ryan Frishberg

Events are used to perform an action in response to a user's action. Most of you are familiar with a simple example:

Don't come near me

In response to the user mousing over the link, we get an alert() message. This is basic event handling. To get a little more advanced, let's look at advanced event handling in Internet Explorer 5 before we move on to event handling in W3C DOM Level 2.

Internet Explorer 5

In IE 5, you can also attach events to nodes with the attachEvent() method. It takes two arguments, the event to be processed, and what function will occur on this event. To show you an example of this, let's take a look at this script:

<a href="javascript:void(0)" id="link1">Don't come near me</a>
<script>
function alertMessage(){
alert('Hey, get off of me');
}

document.getElementById("link1").attachEvent("onmouseover", alertMessage);
</script>

Note that I used "onmouseover." It won't work if I use "onMouseOver," or anything else...it must be in all lowercase. Also note that when I called for the function, alertMessage(), I omitted the parenthesis.

W3C DOM Level 2 Events

Now that you have an idea of how this works, let's examine W3C DOM Level 2 events. The full technical document on this can be found on the W3C site here: Document Object Model Events

Capture or Bubble?

Remember how DOM is just a hierarchal structure of nodes on the page? Well, when an event goes off in one of those nodes, the event has three choices:

The event can occur in the node and only set off the event handler for that node.
The event can occur in the node, set off the event handler for it's top ancestor, and continue down the hierarchal structure, setting of the event handler for each node as it goes through it until it sets off the event handler for the node that the event occurred in.
The event can occur in the node, set off the event handler for that node, and propagate upwards through the hierarchal structure until it reaches the very top ancestor.

Let's take a look at an example page:

<html>
     <head>
     </head>
     <body>
          <div id="div1">
               <span id="span1">
                    Click Me
               </span>
          </div>
     </body>
</html>

And now, let's look at a diagram of the three ways an event can dispatch in this document:

1. Event applies to only that node in which the event occurs in

2. Capturing - when an event occurs in a node and fires the event starting from the top ancestor to the node the event occurred in.

3. Bubbling - when an event occurs in a node and fires the event starting from the node the event occurred in, propagating all the way up to the top.

Understanding the Methods

Now that we see and understand the three main ways an event can occur, let's look at some coding.

addEventListener(eventType, Function, useCapture) adds an event listener to the node it is "run from."

The first argument accepts what type of event to detect. Note that you leave out the all-familiar "on." So instead of using "onclick," you use "click" (all lowercase).
The second argument accepts the function to occur on the event. We'll look at how to pass this in more detail in our examples.
The last argument accepts a Boolean value of true or false. If it is set to true, the event captures, meaning that the event first goes off in the top ancestor and then moves downward towards this node. If it is set to false, the event bubbles, meaning that the event first goes off in the node and propagates upward to its top ancestor.

removeEventListener(eventType, Function, useCapture) removes an event listener from the node it is "run from." Note that all the arguments must be exactly the same as how you set it with the addEventListener() method. So, if you set the useCapture argument to false when you set the event listener with the addEventListener() method and try to remove it with the removeEventListener() method with the useCapture argument set to true, it won't work.

stopPropagation() stops the event from traversing the rest of the document (it stops the event in its hierarchal tracks). For example, it would stop the event from capturing and going down to the events origins, and it would stop the event from bubbling and going up to its top ancestor.

Examples

Capturing Example - Click on the text node and watch how it alerts first the "#document" and goes all the way down to the text node. Also, look at the code and how the addEventListener() method works.

Bubbling Example - Click on the text node and watch how it alerts "#text" first and then propagates itself upward through the hierarchal structure.

stopPropagation Example - Click on the text node and watch it propagate upwards to the span1(<span> tag) node. Then, the div1(<div> tag) calls the stopPropagate() method, which then stops the event from bubbling up any further.

Now that we've finally finished covering events, let's look at an in-depth DOM example.

Next -->