Nov 032012
Article Javascript

For every type of event that can be generated in a web page (i.e., hovering the cursor over an element, pressing a key, clicking with the mouse, etc.) it is possible to associate a javascript function as an event handler. But, when there are two overlapped elements, and both of them have event handlers for the same type of event, we may wonder which of these handlers is executed first. In this post we will review the existing possibilities and how to control the propagation of events from outer to inner elements and viceversa.

As an example, we have three nested <div> elements as shown in the html code below::

This example code is rendered as show below:



If we put the cursor over the blue rectangle and click on it, the following alert popups wil apperar in sequence:

    1. click on div3
    2. click on div2
    3. click on div1

This means that the event is propagated from the innermost element toward the outermost. This behaviour is known as “bubbling”.

But, even if Internet Explorer (up to version 9) does not offer support for it, the W3C standard establishes another possibility, known as “event capture”. In a browser conformant to the W3C specification, event traverses first the tree of elements from the outermost to the innermost, triggering the execution of event handlers associated to the event in capture mode. Then, it traverses the tree back from the innermost to the outermost element, triggering the execution of event handlers associated to the event in “bubbling” mode. In the example below we can see how these event handlers are defined:

In this sample, every <div> element has two event handlers associated, one in bubbling mode and one in capture mode. Events are associated to elementos by calling the “addEventListener” function. The value of the third argument in calls to these function specifies how the event handler is associated (“true”: capture, “false: bubbling)

Note: In IE the function to attach an event handler to an element is named “attachEvent” instead of “addEventListener”. attachEvent always attaches the event handler in bubbling mode.

In this second example, when the blue rectangle is clicked, we get in sequence the messages:

    • Event captured on div1: Click on div3
    • Event captured on div2: Click on div3
    • Event processed on div3: Click on div3
    • Event captured on div3: Click on div3
    • Event processed on div2: Click on div3
    • Event processed on div1: Click on div3

We can see that events in capture mode are processed div1 -> div2 -> div3, while events in bubbling mode are processed in the reverse order. Note, however, that when processing the innermost element (div3), the event in bubbling mode is processed before the event in capture mode.

How to avoid event propagation

Once we have processed an event at a given level, it may be undesirable to execute the event handlers of the other levels. We may stop these executions by means of a call to “cancelBubble” in IE, or a call to stopPropagation in browsers conformant to the W3C specification.


 Posted by at 9:29 pm

 Leave a Reply