JavaScript View Events


1. fullscreenchange: This event occurs when the browser is switched to/out-of fullscreen mode.

The element.requestFullscreen() method is used to view an element in fullscreen mode and element.exitFullscreen() method is used to cancel fullscreen mode.

Syntax:

    <element onfullscreenchane=”functionName()” >


Example:

    <button onclick=”openFullScreenMode()”>Open FullScreen mode</button>
    <button onclick=”closeFullScreenMode()”>Close FullScreen mode</button>
    <script>
        var e = document.documentElement;

        function openFullScreenMode()
        {
            e.requestFullscreen();
        }

        function closeFullScreenMode()
        {
            document.exitFullscreen();
        }
    </script>    


2. fullscreenerror: This event occurs when an element can’t be viewed in fullscreen mode.

Syntax:

    <element onfullscreenerror=”functionName()” >


Example:

    <button onfullscreenerror=”myScript()”>FullScreen mode</button>
    <script>
        function myScript()
        {
            alert(“FullScreen Error”);
        }
    </script>



3. resize: This event occurs when the browser window has been resized.

The outerWidth property returns the outer width of the browser window, including all interface elements while the outerHeight property returns the outer height of the browser window, including all interface elements.

Syntax:

    <element onresize=”functionName()” >


Example: The following example will print the width and height of the browser window.

    <body onresize=”myScript()”>
    <script>
        function myScript()
        {
            var w = window.outerWidth;
            var h = window.outerHeight;
            document.write("Window size: width=" + w + ", height=" + h);
        }
    </script>        


4. scroll: This event occurs when an element has been scrolled.

Syntax:

    <element onscroll=”functionName()” >


Example:

    <div onscroll=”myScript()”> TutorialsDuniya <br/><br/> TutorialsDuniya</div>
    <script>
        function myScript()
        {
            alert(“You scrolled in div”);
        }
    </script>