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

You are here: Reference > JavaScript > client-side > event handling > methods > initUIEvent (event)

initUIEvent method (event)

Browser support:

9

Initializes an event object created by the createEvent method with type of 'UIEvent'.

An event object created by the createEvent method with type of 'UIEvent' implements the UIEvent interface.

After initialization, the event can be dispatched with the dispatchEvent method.

In Internet Explorer before version 9, use the createEventObject method to create a new event object and the fireEvent method to dispatch it.

Syntax:

object.initUIEvent (eventName, bubbles, cancelable, view, detail);

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

Parameters:

eventName

Required. String that specifies the name (type) of the event to initialize.

This parameter is case sensitive! Sets the type property of the event object. For a complete list of events, see the page for Events in JavaScript. The initUIEvent method is appropriate for initialization of UIEvent types principally, for other events, use the type-specific initialization methods.

Note: custom event names are also allowed.
Events represented by the UIEvent interface:

abort

activate

beforeactivate

beforedeactivate

deactivate

DOMActivate

DOMFocusIn

DOMFocusOut

overflow

resize

scroll

select

underflow

bubbles

Required. Boolean that specifies whether the event can bubble or not. Sets the bubbles property of the event object.

One of the following values:

false

The event cannot bubble up.

true

The event can bubble up.

cancelable

Required. Boolean that specifies whether the event can be canceled or not. Sets the cancelable property of the event object.

One of the following values:

false

The event cannot be canceled.

true

The event can be canceled.

view

Required. Reference to the window object in which the event is supposed to have occurred. Sets the view property of the event object.

detail

Required. Integer that specifies additional information about the event. Sets the detail property of the event object.

Return value:

This method has no return value.

Example HTML code 1:

This example uses the initUIEvent method to fire the overflow and underflow events:

<head>
    <script type="text/javascript">
        function Init () {
            var div = document.getElementById ("myDiv");
            if (div.addEventListener) {
                div.addEventListener ('overflow', OnOverflowChanged, false);
                div.addEventListener ('underflow', OnOverflowChanged, false);
            }
        }

        function OnOverflowChanged (event) {
            if (event.type == "overflow") {
                switch (event.detail) {
                    case 0:
                        alert ("The vertical scrollbar has appeared.");
                        break;
                    case 1:
                        alert ("The horizontal scrollbar has appeared.");
                        break;
                    case 2:
                        alert ("The horizontal and vertical scrollbars have both appeared.");
                        break;
                }
            }
            else {
                switch (event.detail) {
                    case 0:
                        alert ("The vertical scrollbar has disappeared.");
                        break;
                    case 1:
                        alert ("The horizontal scrollbar has disappeared.");
                        break;
                    case 2:
                        alert ("The horizontal and vertical scrollbars have both disappeared.");
                        break;
                }
            }
        }

        function ResizeTo (w, h) {
            var div = document.getElementById ("myDiv");

            var vertScrollVisibleBefore = (div.offsetWidth != div.clientWidth);
            var horizScrollVisibleBefore = (div.offsetHeight != div.clientHeight);

            div.style.width = w + "px";
            div.style.height = h + "px";

            var vertScrollVisibleAfter = (div.offsetWidth != div.clientWidth);
            var horizScrollVisibleAfter = (div.offsetHeight != div.clientHeight);

                // In Opera, Google Chrome, Safari and Internet Explorer,
                // the overflow and underflow events are not supported.
                // The following lines fire these events when the visibility of the scrollbars is changed.
                // It causes these events to be fired twice in Firefox
                
            var detail = -1;
                // underflow event
            if (horizScrollVisibleBefore && !horizScrollVisibleAfter) {
                if (vertScrollVisibleBefore && !vertScrollVisibleAfter) {
                    detail = 2;
                }
                else {
                    detail = 1;
                }
            }
            else {
                if (vertScrollVisibleBefore && !vertScrollVisibleAfter) {
                    detail = 0;
                }
            }

            if (detail != -1) {
                var underflowEvent = document.createEvent ("UIEvent");
                underflowEvent.initUIEvent ('underflow', true, true, window, detail);
                div.dispatchEvent (underflowEvent);
            }

            detail = -1;
                // owerflow event
            if (!horizScrollVisibleBefore && horizScrollVisibleAfter) {
                if (!vertScrollVisibleBefore && vertScrollVisibleAfter) {
                    detail = 2;
                }
                else {
                    detail = 1;
                }
            }
            else {
                if (!vertScrollVisibleBefore && vertScrollVisibleAfter) {
                    detail = 0;
                }
            }

            if (detail != -1) {
                var overflowEvent = document.createEvent ("UIEvent");
                overflowEvent.initUIEvent ('overflow', true, true, window, detail);
                div.dispatchEvent (overflowEvent);
            }
        }
    </script>
</head>
<body onload="Init ();">
    <div id="myDiv" style="width:200px;height:200px; overflow:auto; background-color:#e0a0a0;">
        <nobr>Text of the first line.</nobr><br/>
        <nobr>Text of the second line.</nobr><br/>
        <nobr>Text of the third line.</nobr><br/>
        <nobr>Text of the fourth line.</nobr><br/>
        <nobr>Text of the fifth line.</nobr><br/>
        <nobr>Text of the sixth line.</nobr><br/>
    </div>
    <br /><br /><br />
    <button onclick="ResizeTo (100, 100);">Resize to 100*100</button>
    <button onclick="ResizeTo (200, 100);">Resize to 200*100</button>
    <button onclick="ResizeTo (100, 200);">Resize to 100*200</button>
    <button onclick="ResizeTo (200, 200);">Resize to 200*200</button>
</body>