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

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

onbounce event | bounce event

Browser support:

Occurs when the contents of a marquee element touch one side of the marquee element's bounding rectangle.

The onbounce event is fired only if the behavior property of the marquee element is set to 'alternate'. In other cases if the marquee element starts looping the contents and at the start of every new iterating, the onstart event is fired.

How to register:

In HTML:

In JavaScript:

object.onbounce = handler;

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

9

object.attachEvent ("onbounce", 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	No
Cancelable	Yes
Event object	Event

Actions that invoke the onbounce event:

When the contents touch one side of a marquee element.

Marquee specific events:

onbounce, onfinish, onstart.

Example HTML code 1:

This example illustrates the use of the onbounce event:

<head>
    <script type="text/javascript">
        function WriteInfo (event) {
            var marquee = event.target ? event.target : event.srcElement;
            var info = marquee.parentNode.getElementsByTagName ("div")[0];
            info.innerHTML += event.type + ", ";
        }
    </script>
</head>
<body>
    <div>
        behavior="alternate"<br />
        <marquee behavior="alternate" loop="3" width="300" style="border:1px solid red"
                onbounce="WriteInfo (event)" onfinish="WriteInfo (event)" onstart="WriteInfo (event)">
            Hi There!
        </marquee>
        <div style="color:blue"></div>
    </div>
    <br /><br />
    <div>
        behavior="scroll"<br />
        <marquee behavior="scroll" loop="3" width="300" style="border:1px solid red"
                onbounce="WriteInfo (event)" onfinish="WriteInfo (event)" onstart="WriteInfo (event)">
            Hi There!
        </marquee>
        <div style="color:blue"></div>
    </div>
    <br /><br />
    <div>
        behavior="slide"<br />
        <marquee behavior="slide" loop="3" width="300" style="border:1px solid red"
                onbounce="WriteInfo (event)" onfinish="WriteInfo (event)" onstart="WriteInfo (event)">
            Hi There!
        </marquee>
        <div style="color:blue"></div>
    </div>
</body>