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>