In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > properties > eventPhase (event)

eventPhase property (event)

Browser support:

9

Returns an integer value that indicates the current processing phase of an event.

If an event is captured by event listeners, then the event processing starts with the capturing phase. In that phase, the event listeners that capture the event are called.
After that phase or if the event is not captured, the target phase follows. In that phase, the event is dispatched to the target element.
Finally, in the last phase (bubbling phase), the event propagates up the DOM hierarchy.

Syntax:

object.eventPhase;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that represents the processing phase. Predefined constants are available for the possible values of this property, in the scope of the Event interface. You can use them directly through the Event interface (Event.CAPTURING_PHASE) or through an instance of the event object. For further details, please see the page for the Event interface.

One of the following values (the value of a predefined constant appears in parentheses after the constant):

CAPTURING_PHASE (1)

The event flow is in the capturing phase.

AT_TARGET (2)

The event flow is in the target phase.

BUBBLING_PHASE (3)

The event flow is in the bubbling phase.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the eventPhase property:

<head>
    <script type="text/javascript">
        function Init () {
                // Captures the click event for the body
            if (document.body.addEventListener) {
                document.body.addEventListener('click', OnCapturedClick, true);
            }
        }

        function OnCapturedClick (event) {
            GetPhase (event, "body");
        }

        function GetPhase (event, tagName) {
            if ('eventPhase' in event) {
                switch (event.eventPhase) {
                case Event.CAPTURING_PHASE:
                    alert ("The event flow is in the capturing phase. (" + tagName + ")");
                    break;
                case Event.AT_TARGET:
                    alert ("The event flow is in the target phase. (" + tagName + ")");
                    break;
                case Event.BUBBLING_PHASE:
                    alert ("The event flow is in the bubbling phase. (" + tagName + ")");
                    break;
                }
            }
            else {
                    // Internet Explorer before version 9
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body onload="Init ();" onclick="GetPhase (event, 'body');">
    Click on the button, you will see the processing phases of a captured event.
    <button onclick="GetPhase (event, 'button');">Get event phase!</button>
</body>