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

You are here: Reference > JavaScript > client-side > event handling > events > DOMFocusOut

DOMFocusOut event

Browser support:

Occurs before an element loses the focus.

The DOMFocusOut event bubbles up (unlike the onblur event), so if you want to detect whether an element or its child loses focus, it is sufficient to listen for the DOMFocusOut event of the element.

In Internet Explorer, use the onfocusout event instead of the DOMFocusOut event.
In Firefox, if you need to detect whether a child of an element loses focus, use a capturing listener for the onblur event. See the examples for details.

To detect when an element receives focus, use the onfocusin, DOMFocusIn and onfocus events.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.addEventListener ("DOMFocusOut", handler, useCapture);

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	Yes
Cancelable	No
Event object	UIEvent

Actions that invoke the DOMFocusOut event:

Clicking outside the active element.
Navigating away from the active element with the TAB or an access key.
Invoking the setActive method on a non-active element that can be active.
Invoking the focus method on a non-active element that can be active.
Invoking the blur method on the active element.

The order of events related to the DOMFocusOut event:

Action	Event order
Any action that invokes the DOMFocusOut event.	onblur DOMFocusOut

Example HTML code 1:

This example illustrates the use of the DOMFocusOut event:

<head>
    <script type="text/javascript">
        function Init () {
            var form = document.getElementById ("myForm");
            if (form.addEventListener) {
                    // Opera, Google Chrome and Safari
                form.addEventListener ("DOMFocusIn", OnFocusInForm, false);
                form.addEventListener ("DOMFocusOut", OnFocusOutForm, false);
            }
        }

        function OnFocusInForm (event) {
            if (event.target) {
                event.target.style.color = "red";
            }
        }
        function OnFocusOutForm (event) {
            if (event.target) {
                event.target.style.color = "";
            }
        }

    </script>
</head>
<body onload="Init ()">
    Click on the text fields to see the result!
    <form id="myForm">
        User name: <input type="text" value="my name"/><br />
        E-mail: <input type="text" value="myname@mydomain.com"/>
    </form>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

A cross-browser solution for the previous example:

<head>
    <script type="text/javascript">
        function Init () {
            var form = document.getElementById ("myForm");
            if ("onfocusin" in form) {  // Internet Explorer
                    // the attachEvent method can also be used in IE9,
                    // but we want to use the cross-browser addEventListener method if possible
                if (form.addEventListener) {    // IE from version 9
                    form.addEventListener ("focusin", OnFocusInForm, false);
                    form.addEventListener ("focusout", OnFocusOutForm, false);
                }
                else {
                    if (form.attachEvent) {     // IE before version 9
                        form.attachEvent ("onfocusin", OnFocusInForm);
                        form.attachEvent ("onfocusout", OnFocusOutForm);
                    }
                }
            }
            else {
                if (form.addEventListener) {    // Firefox, Opera, Google Chrome and Safari
                        // since Firefox does not support the DOMFocusIn/Out events
                        // and we do not want browser detection
                        // the focus and blur events are used in all browsers excluding IE
                        // capturing listeners, because focus and blur events do not bubble up
                    form.addEventListener ("focus", OnFocusInForm, true);
                    form.addEventListener ("blur", OnFocusOutForm, true);
                }
            }
        }

        function OnFocusInForm (event) {
            var target = event.target ? event.target : event.srcElement;
            if (target) {
                target.style.color = "red";
            }
        }
        function OnFocusOutForm (event) {
            var target = event.target ? event.target : event.srcElement;
            if (target) {
                target.style.color = "";
            }
        }

    </script>
</head>
<body onload="Init ()">
    Click on the text fields to see the result!
    <form id="myForm">
        User name: <input type="text" value="my name"/><br />
        E-mail: <input type="text" value="myname@mydomain.com"/>
    </form>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

DOMFocusIn

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments