BOM对象(二)

Window 对象

onLoad事件

<script>
        // window.onload事件属性 是在设置window的load事件处理函数
        // 该事件在所有的当前页面资源加载完毕之后触发
        window.onload = function() {
            // script标签推荐的位置 head的末尾 和body的末尾
            btn.onclick = function() {
                console.log("nihao");
            }
        }
</script>

对于onload事件就是当所有的页面加载完毕之后才会触发事件中的函数，因为对于js得代码读取就是单线程，从上到下，从外到内，如果不加上onload的话就会出现ReferenceError: btn is not defined
的语法错误，

onscroll事件

对于scroll事件就是的当页面发生右侧的滑轮进行滑动的时候，进行事件的高频率的输出；

 <script>
        // scroll事件是页面卷动时触发的事件
        window.onscroll = function() {
            // 这个事件会在页面的卷动值发生变化的时候 触发 注: 它是一个高频率事件
            // console.log("触发");
            // 页面卷动值：指的是 位于视口上方 我们看不到的页面部分高度，当你滚动滑轮的时候其值也是一直在变
            // document.documentElement.scrollTop || document.body.scrollTop
            // console.log("页面已经卷动的高度是" + document.documentElement.scrollTop);
            // console.log("页面视口的高度" + window.innerHeight);
            // 整个页面的高度
            // console.log("整个页面的高度" + document.body.clientHeight);
            // 判定是否快要到底部
            if (document.documentElement.scrollTop +  window.innerHeight  >= document.body.clientHeight - 100) {
                // 快要到底部了
                console.log("还差不到100px就到底部了");
                // 设置行内样式
                backTop.style.display = "block";
            }
        }
    </script>

navigator事件

就是获取用户的一些信息

浏览器 Cookie

cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "cookiesEnabled is " + navigator.cookieEnabled;
</script>

浏览器应用程序名称

appName 属性返回浏览器的应用程序名称：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appName is " + navigator.appName;
</script>

浏览器应用程序代码名称

appCodeName 属性返回浏览器的应用程序代码名称：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.appCodeName is " + navigator.appCodeName;
</script>

“Mozilla” 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称。

浏览器引擎

product 属性返回浏览器引擎的产品名称：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "navigator.product is " + navigator.product;
</script>

浏览器版本

appVersion 属性返回有关浏览器的版本信息：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.appVersion;
</script>

浏览器代理

userAgent 属性返回由浏览器发送到服务器的用户代理报头（user-agent header）：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.userAgent;
</script>

浏览器平台

platform 属性返回浏览器平台（操作系统）：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.platform;
</script>

浏览器语言

language 属性返回浏览器语言：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.language;
</script>

浏览器是否在线？

onLine 属性返回 true，假如浏览器在线：

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = navigator.onLine;
</script>

onresize属性

<script>
        // window.onresize 是用来设置当浏览器的视口尺寸发生变化的时候执行的函数
        window.onresize = function() {
            console.log(window.innerWidth);
            console.log(window.innerHeight);
        }
    </script>