Categories:

Assigning event handlers in the DOM

In light of the new event flow (event capture and event bubble) that occurs inside the DOM, new methods for assigning event handlers are introduced to harness it. Below we discuss how to assign event handlers to elements using the DOM, or more specifically, the DOM of NS6 and IE5, respectively.

Assigning event handlers

To tame the event capture then event bubble flow, a concept for attaching event handlers is introduced in modern browsers- event listeners. Oh no, here comes an earful. Actually, event listeners can be summed up using just two methods. 

object.addEventListener(event, function, capture)
object.removeEventListener(event, function, capture)

-event should contain the event you wish to detect, such as click (onclick minus the "on" prefix)
-function should contain the reference call to the function to execute for this event, such as dothis (dothis() minus the parenthesis)
-capture should contain the Boolean value "true" or "false"; A value of "true" causes function to be executed when the event is detected at the capture phase. A value of "false" causes function to be executed when event is at bubble phase.

The first method assigns an event handler, while the second obviously allows you to then remove it.

Let's use this knowledge to attach an onMousever event to a DIV:

<div id="test">
Some text over div
</div>

<script type="text/javascript">

function alertit(){
alert("You moved your mouse over me!")
}

document.getElementById("test").addEventListener("mouseover",alertit,false)

</script>

Moving your mouse over the DIV now will cause an alert message to popup.

One cool thing about addEventListener() is that it can be used multiple times to attach multiple functions to the same event for the same element. For example, we can have 3 separate onMouseover events for the DIV above:

document.getElementById("test").addEventListener("mouseover",alertthis,false)
document.getElementById("test").addEventListener("mouseover",alertdat,false)
document.getElementById("test").addEventListener("mouseover",alerttidat,false)

and all three will be responded to onMouseover. Finally two scripts can both apply the same event handler to an element without the former being cancelled out.

Using object.removeEventListener(), you can dynamically remove an event handler added using its counterpart. When doing so, the 3 parameters must be identical to the ones used to add the event.

Assigning event handlers in legacy IE browsers (IE6 and below)

In IE6 and below, the DOM is more simplistic in that it focuses simply on events bubbling up. In other words, the event flow of IE6 is half that of all other modern browsers, including IE7 and above. Good thing it retains the better half :)

Two proprietary methods are supported for assigning event handlers in the DOM of IE6 and below:

object.attachEvent(eventname, function)
object.detachEvent(eventname, function)

-eventname should contain the full event name you wish to detect, such as onclick
-function should contain the reference call to the function to execute for this event, such as dothis (dothis() minus the parenthesis)

Let's replicate the above <DIV>, but attach the event IE6 and below style:

<div id="test">
Some text over div
</div>

<script type="text/javascript">

function alertit(){
alert("You moved your mouse over me!")
}

document.getElementById("test").attachEvent("onmouseover",alertit)

</script>

All this talk of event flow and assigning event handlers is begging for a good example using them. Well, here it is...