两个常见事件
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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
