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

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

DOMActivate event

Browser support:

Occurs when an element becomes active.

Only one element can be active at a time in a document. An active element does not necessarily have focus, but an element with focus is always the active element in a document. For example, an active element within a window that is not the foreground window has no focus.

You can get the active element with the activeElement property.
To set the active element in a document, use the focus and setActive methods.
To determine whether the active element has focus, use the hasFocus method.

Unfortunately, the DOMActivate event is not fired on all elements that can be active.

The following table shows the behavior of the DOMActivate event for some HTML elements:

Fires	Does not fire
button, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:reset, input:submit	input:text, select, textarea

Fires	Does not fire
button, input:button, input:file, input:image, input:password, input:range, input:reset, input:search, input:submit, input:text, textarea	input:checkbox, input:radio, select

In Internet Explorer, use the onactivate event instead of the DOMActivate event.

How to register:

In HTML:

This event cannot be registered in HTML.

In JavaScript:

object.addEventListener ("DOMActivate", 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	Yes
Event object	UIEvent

Actions that invoke the DOMActivate event:

Clicking on a non-active element that can be active (see the focus method).
Navigating to an element with an access key.

Actions that do not invoke the DOMActivate event:

Navigating to an element with the TAB key.
Invoking the focus method on a non-active element that can be active.

The order of events related to the DOMActivate event:

Action	Event order
Any action that invokes the DOMActivate event.	onfocus DOMFocusIn DOMActivate

Example HTML code 1:

This example illustrates the use of the DOMActivate event:

<head>
    <script type="text/javascript">
        function Init () {
            var button = document.getElementById ("myButton");
            if (button.addEventListener) {
                button.addEventListener ("DOMActivate", OnActivate, false);
            }
        }

        function OnActivate () {
            alert ("The button has been activated!");
        }
    </script>
</head>
<body onload="Init ();">
    <button id="myButton">Click on this button</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the onactivate and DOMActivate events:

<head>
    <script type="text/javascript">
        function Init () {
            var button = document.getElementById ("myButton");
            var textField = document.getElementById ("myText");
            var checkbox = document.getElementById ("myCheck");

            if ('onactivate' in button) {   // Internet Explorer
                    // the attachEvent method can also be used in IE9,
                    // but we want to use the cross-browser addEventListener method if possible
                if (button.addEventListener) {  // IE from version 9
                    button.addEventListener ("activate", OnActivate_Button, false);
                    textField.addEventListener ("activate", OnActivate_Text, false);
                    checkbox.addEventListener ("activate", OnActivate_Checkbox, false);
                }
                else {
                    if (button.attachEvent) {   // IE before version 9
                        button.attachEvent ("onactivate", OnActivate_Button);
                        textField.attachEvent ("onactivate", OnActivate_Text);
                        checkbox.attachEvent ("onactivate", OnActivate_Checkbox);
                    }
                }
            }
            else {
                if (button.addEventListener) {        // Firefox, Google Chrome, Safari, Opera
                        // Firefox, Google Chrome and Safari
                    button.addEventListener ("DOMActivate", OnActivate_Button, false);
                        // Google Chrome and Safari
                    textField.addEventListener ("DOMActivate", OnActivate_Text, false);
                        // Firefox
                    checkbox.addEventListener ("DOMActivate", OnActivate_Checkbox, false);
                }
            }
        }

            // Internet Explorer, Firefox, Google Chrome and Safari
        function OnActivate_Button () {
            alert ("The button has been activated!");
        }
            // Internet Explorer, Google Chrome and Safari
        function OnActivate_Text () {
            alert ("The text field has been activated!");
        }
            // Internet Explorer and Firefox
        function OnActivate_Checkbox () {
            alert ("The check box has been activated!");
        }
    </script>
</head>
<body onload="Init ();">
    Try to activate the following elements:<br /><br />
    <button id="myButton">Sample button</button>
    <input type="text" id="myText" value="Sample text field" />
    <input type="checkbox" id="myCheck" />Sample checkbox
</body>