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

You are here: Reference > JavaScript > client-side > event handling > methods > attachEvent

attachEvent method

Browser support:

Registers an event handler function (event listener) for the specified event on the current object.

The event listener will be called every time when the event occurs on the current element. The event handler will also be called if the event occurs on a descendant element of the current object and the event can bubble up. In that case, the event handler will be called while the event propagates up in the DOM hierarchy.

The attachEvent method only works in Internet Explorer and Opera, use the addEventListener method in Firefox, Google Chrome and Safari (and Opera and Internet Explorer from version 9).

Use the detachEvent method to remove an event listener that has been registered with the attachEvent method. If a mouse event needs to be captured, use the setCapture method.

Event propagation and capturing work differently in browsers. You can find a detailed description about them and some others (such as how to cancel an event) on the page for the event object.

Syntax:

object.attachEvent (eventName, function);

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

Parameters:

eventName

Required. String that specifies the name of the event to listen for.

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

This parameter is not case sensitive.

function

Required. Represents the event listener function to be called when the event occurs.

When the event occurs, an event object is initialized and passed to the event handler as the first parameter. The members of the event object is filled based on the current event.
Although Internet Explorer 9 started to support different event objects similarly to other browsers, but when an event handler is registered with the attachEvent method, the passed event object is a copy of the window.event object, not an event type dependent event object.

Return value:

Boolean. One of the following values:

false	Failed to attach.
true	The function has been attached to the event.

Example HTML code 1:

This example illustrates the use of the addEventListener and attachEvent methods:

<head>
    <script type="text/javascript">
        function OnButtonDown (button) {
            button.style.color = "#ff0000";
        }
        function OnButtonUp (button) {
            button.style.color = "#000000";
        }

        function Init () {
            var button = document.getElementById ("testButton");
            if (button.addEventListener) {  // all browsers except IE before version 9
                button.addEventListener ("mousedown", function () {OnButtonDown (button)}, false);
                button.addEventListener ("mouseup", function () {OnButtonUp (button)}, false);
            }
            else {
                if (button.attachEvent) {   // IE before version 9
                    button.attachEvent ("onmousedown", function () {OnButtonDown (button)});
                    button.attachEvent ("onmouseup", function () {OnButtonUp (button)});
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    Click on the following button and see its text color.
    <br />
    <button id="testButton">Test 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 addEventListener, attachEvent, removeEventListener and detachEvent methods.

<head>
    <script type="text/javascript">
        function OnRedClick () {
            alert ("A click event has occurred on the red button.");
        }

        function AddEventHandler () {
            var redButton = document.getElementById ("redButton");
            if (redButton.addEventListener) {   // all browsers except IE before version 9
                redButton.addEventListener ("click", OnRedClick, false);
            } 
            else {
                if (redButton.attachEvent) {    // IE before version 9
                    redButton.attachEvent ('onclick', OnRedClick);
                }
            }
        }

        function RemoveEventHandler () {
            var redButton = document.getElementById ("redButton");
            if (redButton.removeEventListener) {    // all browsers except IE before version 9
                redButton.removeEventListener ("click", OnRedClick, false);
            }
            else {
                if (redButton.detachEvent) {        // IE before version 9
                    redButton.detachEvent ('onclick', OnRedClick);
                }
            }
        }
    </script>
</head>
<body>
    Click on the red button when the 'click' event has a listener and when it does not.<br />
    <button onclick="AddEventHandler ();">Add a 'click' event listener to the red button</button>
    <button onclick="RemoveEventHandler ();">Remove the event listener</button>
    <br /><br />
    <button id="redButton" style="background-color:red">Red button</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to detect when the user presses a mouse button over an element but releases the button outside the element:

<head>
    <script type="text/javascript">
        var capturedButton = null;
        function OnButtonDown (button) {
            capturedButton = button;
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("mouseup", OnButtonUp, true);
            }
            else {
                if (button.setCapture) {    // IE before version 9
                    button.attachEvent ("onlosecapture", OnButtonLoseCapture);
                    button.setCapture ();
                }
            }
        }
        function OnButtonUp () {
            if (capturedButton) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    window.removeEventListener ("mouseup", OnButtonUp, true);
                }
                else {
                    if (capturedButton.releaseCapture) {    // IE before version 9
                        capturedButton.detachEvent ("onlosecapture", OnButtonLoseCapture);
                        capturedButton.releaseCapture ();
                    }
                }
                capturedButton = null;
            }
            alert ("The button has been released!");

        }

        function OnButtonLoseCapture () {
            alert ("The button loses the mouse capture!");
            OnButtonUp ();
        }

        function Init () {
            var button = document.getElementById ("testButton");
            if (button.addEventListener) {  // all browsers except IE before version 9
                button.addEventListener ("mousedown", function () {OnButtonDown (button)}, false);
            }
            else {
                if (button.attachEvent) {   // IE before version 9
                    button.attachEvent ("onmousedown", function () {OnButtonDown (button)});
                    button.attachEvent ("onmouseup", OnButtonUp);
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    Press the following button and release the mouse button somewhere inside or outside the browser.
    <br />
    <button id="testButton">Capture Test</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example implements a simple spin control:

<head>
    <script type="text/javascript">
        var capturedButton = null;
        var changeTimer = 0;

        function ChangeInput (increase, delay) {
            var myInput = document.getElementById ("myInput");
                // parse the current value
            var value = Number (myInput.value);
            if (isNaN (value)) {
                value = 0;
            }
                // direction
            var dir = increase ? 1 : -1;
                // the new value
            var step = 1;
            value += dir * step;
            if (value < 0) {
                value = 0;
            }
            if (value > 100) {
                value = 100;
            }
            myInput.value = value;

            changeTimer = setTimeout (function () {ChangeInput (increase, 100)}, delay);
        }

        function OnButtonDown (button, increase) {
                // capture mouse up
            capturedButton = button;
            if (window.addEventListener) {  // all browsers except IE before version 9
                window.addEventListener ("mouseup", OnButtonUp, true);
            }
            else {
                if (button.setCapture) {    // IE before version 9
                    button.attachEvent ("onlosecapture", OnButtonLoseCapture);
                    button.setCapture ();
                }
            }

                // initialy a longer delay
            ChangeInput (increase, 500);
        }
        
        function OnButtonUp () {
            if (changeTimer) {
                clearTimeout (changeTimer);
                changeTimer = 0;
            }

            if (capturedButton) {
                if (window.removeEventListener) {   // all browsers except IE before version 9
                    window.removeEventListener ("mouseup", OnButtonUp, true);
                }
                else {
                    if (capturedButton.releaseCapture) {    // IE before version 9
                        capturedButton.detachEvent ("onlosecapture", OnButtonLoseCapture);
                        capturedButton.releaseCapture ();
                    }
                }
                capturedButton = null;
            }
        }

        function OnButtonLoseCapture () {
            OnButtonUp ();
        }

        function Init () {
            var incButton = document.getElementById ("incButton");
            var decButton = document.getElementById ("decButton");
            if (incButton.addEventListener) {   // all browsers except IE before version 9
                incButton.addEventListener ("mousedown", function () {OnButtonDown (incButton, true)}, false);
                decButton.addEventListener ("mousedown", function () {OnButtonDown (decButton, false)}, false);
            }
            else {
                if (incButton.attachEvent) {    // IE before version 9
                    incButton.attachEvent ("onmousedown", function () {OnButtonDown (incButton, true)});
                    decButton.attachEvent ("onmousedown", function () {OnButtonDown (decButton, false)});
                    incButton.attachEvent ("onmouseup", OnButtonUp);
                    decButton.attachEvent ("onmouseup", OnButtonUp);
                }
            }
        }
    </script>
</head>
<body onload="Init ()">
    <input id="myInput" size="3" value="50" />
    <button id="incButton">Increase</button>
    <button id="decButton">Decrease</button>
</body>