js的几个补充事件

在这里我做几个前面文章当中没有介绍的javascript补充事件

1、onscroll：当元素滚动条滚动时执行的事件；

        <div class="container">

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

            <p>滚动试试看看</p>

        </div>

        <h1>鼠标滚动<span id="num">0</span>次</h1>

        <script type="text/javascript">

            var num = 0;

            var con = document.getElementsByClassName('container')[0];

            con.onscroll = function() {

                num += 1;

                var spanNum = document.getElementById('num');

                spanNum.innerHTML = num;

            }

        </script>

    <style type="text/css">

        .to-top {

            width: 100px;

            height: 100px;

            background: #7FFF00;

            position: fixed;

            bottom: 0;

            right: 0;

            display: none;

        }

    </style>

        <div class="to-top">返回顶部</div>

        <script type="text/javascript">

            var toTop = document.getElementsByClassName('to-top')[0];

            document.onscroll = function() {

                // 获取滚动条距离顶部的距离

                var t = document.documentElement.scrollTop || document.body.scrollTop;

                if(t >= 300) {

                    toTop.style.display = 'block';

                    toTop.onclick = function() {

                        scrollTo(0, 0);

                    }

                } else {

                    toTop.style.display = 'none';

                }

            }

        </script>

2、onresize：当浏览器被重置大小时执行的事件；

        <h6 class="page-size"></h6>

        <script type="text/javascript">

            // 首先初始化浏览器的尺寸并且将尺寸渲染到页面；

            var pageW = document.documentElement.clientWidth || document.body.clientWidth;

            var pageH = document.documentElement.clientHeight || document.body.clientHeight;

            var pageSize = document.getElementsByClassName('page-size')[0];

            document.body.onload = function() {

                pageSize.innerText = '浏览器尺寸被重构时，目前浏览器的尺寸：高是 ' + pageH + 'px,宽是' + pageW + 'px。';

            }

            document.body.onresize = function() {

                pageW = document.documentElement.clientWidth || document.body.clientWidth;

                pageH = document.documentElement.clientHeight || document.body.clientHeight;

                pageSize.innerText = '浏览器尺寸被重构时，目前浏览器的尺寸：高是 ' + pageH + 'px,宽是' + pageW + 'px。';

            }

        </script>