window常见 事件、方法、属性

两个常见事件

Window.onload

语法：

    window.onload = function(){} 
    或者 
    window.addEventListener('load',function(){})

window.onload是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数。
注意：

有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
但是window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload = function(){}为准
所以我们可以采用事件监听的方法去注册事件,这样就没有限制了，比如

    window.addEventListener("load", function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点击我111');
            })
        })
        window.addEventListener("load", function () {
            alert('222');
        })

还有一个非常相似的 document.addEventListener('DOMContentLoaded',function(){}) DOMContentLoaded触发事件时，仅当DOM(主要的标签元素)加载完成时就会触发，不包括样式表、图片、flash等 ie9以上支持

      document.addEventListener('DOMContentLoaded', function () {
          alert(33);
      })

会发现最先显示的是 33，因为这个是标签加载完就开始执行，上面那个load事件是要等样式表、图片之类的全部加载完才执行
使用情景：你很多图片，如果用第一种，会让用户等很久，因为要加载完图片才会出现交互效果，用户体验不好，第二种是加载完标签就有交互效果，顶多没图片而已。

window.onresize

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数。
绑定事件的两种方式：

    window.onresize = function(){} 
    或者
    window.addEventListener('resize',function(){})

   window.onresize = function () {
          console.log(window.innerWidth);
                console.log('变化了！');
                // 只要窗口大小发生变化，就会触发
                // 以前没css3的时候，经常用这个事件完成响应式布局。window.innerWidth获取当前屏幕宽度
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            }

两个常见方法

setTimeOut()

用于设置一个定时器，该定时器到期后会执行调用函数
语法：
window.setTimeout(调用函数,[ 延迟的毫秒数 ]);
调用时能省略window
参数中的调用函数我们通常称为回调函数，普通函数是按照代码顺序直接调用的，而这个函数，需要等待时间，时间到了才去调用这个函数，因此叫回调函数。

    setTimeout(function () {
            console.log('时间到了');
        }, 2000); //2s之后才调用这个函数

        setTimeout(callback, 5000); //也可以在第一个参数写函数名
        // setTimeout('callback()', 5000); 这种写法不提倡

        function callback() {
            console.log('boom！');
        }

停止setTimeout()定时器：
语法：
window.clearTimeout(定时器标识符) 同样，window可以省略不写

    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var time1 = setTimeout(function () {
            console.log('boom！');
        }, 5000)

        // 点击按钮清除定时器
        btn.addEventListener('click', function () {
            clearTimeout(time1);
        })
    </script>

setInterval()

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
语法：
window.setInterval(回调函数,[间隔的毫秒数])
setTimeout()和setInterval()的区别在于，前者到时间只执行一次，后者能无限执行。
停止setInterval定时器：
语法：
window.clearInterval(定时器标识符)

三个对象

location对象

什么是location对象？

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性称为location对象。

URL： Uniform Resource Locator统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
URL的一般语法格式为： protocal://host[:port]/path/[?query]#fragment
eg: www.test.cn/index.html?…
protocal : 通信协议 常用的http，ftp，maito等
host : 主机(域名) 比如www.test.com
port : 端口号 可选，省略时使用方案的默认端口 如http的默认端口为80
path : 路径 由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query : 参数 以键值对的形式，通过&分开
fragment : 片段 #后面内容 常见于链接 锚点
console.log(location);
location对象常见属性:
location.href : 获取 或 设置整个URL👈重点记
location.host : 返回主机(域名)
location.port : 返回端口号，如果没写则返回空字符串
location.pathname : 返回路径
location.search : 返回参数👈重点记
location.hash : 返回片段 #后面的内容常见于链接 锚点

location对象的方法

location对象常用方法:
location.assign() 跟href一样，可以跳转页面(也称为重定向页面),记录历史
location.replace() 替换当前页面，因为不记录历史，所以不能后退页面
location.reload() 重新加载页面，相当于刷新按钮或者f5。如果参数为true则是强制刷新，相当于ctrl + f5

    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // location.assign('http://www.baidu.com'); 记录浏览历史，可以实现后退功能
            // location.replace('http://www.baidu.com'); 不记录浏览历史，不能后退
            location.reload();
        })
    </script>

navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，我们常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值
(就会知道你用的是pc端浏览器呀还是移动端的，这样可以实现不同端打开页面显示不同效果，比如pc的京东官网和手机的京东官网，同一个网址不同设备打开是不一样的)
下面前端代码可以判断用户哪个终端打开页面，实现跳转

    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            window.location.href = ""; //手机
        }else{
            window.location.href = "" //电脑
        }

history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
history.back() : 可以后退功能
history.forward() : 可以前进功能
history.go() : 前进后退功能，参数如果是1前进1个页面,2同理 如果是-1 后退1个页面

作者：Guguuuu
链接：https://juejin.cn/post/7087472071495647269
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。