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

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

onactivate event | activate 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.

In Firefox, Google Chrome and Safari, use the DOMActivate event instead of the onactivate event.

The onactivate event is not cancelable. If you want to prevent an element from getting the focus, set the disabled property of the element to true. You can find an example that demonstrates that on the page for the onfocus event.

To detect when an element loses its active state, use the onbeforedeactivate and ondeactivate events.

How to register:

In HTML:

In JavaScript:

object.onactivate = handler;

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

9

object.attachEvent ("onactivate", handler);

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

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 onactivate event:

Clicking on a non-active element that can be active (see the setActive method).
Navigating to an 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.

The order of events related to the onactivate event:

Action	Event order
Any action that invokes the onactivate event.	onbeforeeditfocus (only for editable elements) onbeforeactivate onactivate onfocusin onfocus

Example HTML code 1:

This example illustrates the use of the onactivate event:

<input type="text" onactivate="alert ('The text field has become active.');" value="Please click this text.">

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>