INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Event Handling

Event Bubbling (in IE) by jaredn
Posted: 24 Jan 01

Event bubbling is Internet Explorer's
method of passing events along the document hierarchy. It works like this:

1. A user or particular condition causes an event
2. The event object is updated
3. An event is fired, and the handler called
4. The event handler bubbles up to the next element in the heirarchy, unless it's the current
   element is the window object
5. The default event handler is called.

An important thing to note is that once we reach step 3, we can prevent steps 4 and/or 5 from taking place
by *cancelling the bubble and/or returning false*.

A simple example of how event bubbling works is in the following document:


<html>
<head>
    <title>Event Handler Test</title>
<script>
function mouseOverHandler()
{
    window.event.srcElement.style.backgroundColor='red'
}

function mouseOutHandler()
{
    window.event.srcElement.style.backgroundColor='blue'
}
</script>
</head>

<body>
<div onmouseover="mouseOverHandler()" onmouseout="mouseOutHandler()">
<span style="background-color:blue;color:white">
This one will change.
</span>
<br>
<span onmouseout="window.event.cancelBubble=false"
onmouseover="window.event.cancelBubble=true" style="background-color:blue;color:white">
This one will <b>not</b> change.
</span>
<br>
<span style="background-color:blue;color:white">
This one will change.
</span>
</div>
</body>
</html>

Notice, we have not explicity set any event handlers for the 'SPAN' tags here, but the same functionality is
produced that we would have achieved by explicitily setting an event handler for each span. This is because
the event starts at the span, but then bubbles up to the container 'DIV' above it. Notice also that
the second span will not change color when you mouseover it. This is because we assigned a particular event
handler to that one:

window.event.cancelBubble=false

That line will prevent the event from bubbling up the document hierarchy and reaching the handler in the 'DIV'
that contains it. Therefore, no action is taken.

Another interesting technique we can use is returning false in our own event handlers. This will prevent
whatever the default action of the event is from occuring. Take the following document as an example:

<html>
<head>
    <title>Event Handler Test</title>
</head>
<body>
<a href="javascript:alert('Told ya!')">
This one will alert.
</a>
<br>
<a href="javascript:alert('Told ya!')">
This one will alert.
</a><br>
<a href="javascript:alert(this.href)" onClick="this.innerText='Told Ya!';return false">
This one will not alert.
</a>
</body>
</html>

Notice that clicking on the first two links will allows the default action to occur, while clicking on the third
one prevents the default action from taking place. We achieved this by using:

return false

in the event handler.

Please note that these examples are very contrived, and that real-world applications of these concepts
may be a bit more complex. I chose to keep them simple so they would be easy to understand.

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close