BOM的其他对象
1、history对象：保存【当前窗口】的历史记录（打开【过】的url），可用于
前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);
2、*navigator对象：保存了当前浏览器的基本信息，可以使用js来判断我们是什么浏览器以及版本号 - 类似于css hack（浏览器兼容性问题的，专门针对老IE），但是更强大，单独为老IE写js
属性：navigator.userAgent
HTML5（语义化标签、增强型表单、音频视频）和CSS3（过渡、动画、转换、媒体查询、阴影、弹性盒子、rem...）和ES5以上的任何东西，老IE都是不支持的，所以要做兼容
BOM确实有很多具有兼容性问题，但是我们不需要自己使用navigator去做兼容，前辈们帮我们已经做好了
3、*location对象：保存当前窗口【正在打开】的url
1、***常识：一个url网址由哪些部分组成 - 5部分
http://127.0.0.1:8020/bom02/new/03navigator%E5%AF%B9%E8%B1%A1.html?__hbt=1663118768002
https://www.baidu.com/s?wd=%E5%B1%8C%E7%88%86%E5%95%A6&rsv_spt=1&rsv_iqid=0x9a5c128800018a49&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=1&rsv_sug3=10&rsv_sug1=7&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4415&rsv_sug4=4416
协议名：https、http、ftp、ws（直播）...
域名/主机号：底层大家都是主机号，域名是需要花钱购买的
端口号：默认端口可以省略不写，https默认端口为443，http默认端口为80
*文件的相对路径/路由：百度把他加密了隐藏起来了 - 决定着用户看到的是哪个网页
*查询字符串/请求消息：客户端发送到服务器端的东西，服务器端需要接住然后判断我们请求的是什么，才能进行响应 - 和后端进行沟通交流的关键点
目的：为了学习全栈开发而准备
协议名://域名:端口号/路由?请求消息
我们可以通过location得到这个url的每一个部分，但是不要记忆，直接console.log输出location就能直接看到
协议名：location.protocal
域名：location.hostname
端口号：location.port
路由：location.pathname
请求消息：location.search
2、作用：跳转
location="新url"
跳转后禁止后退：location.replace("新url");
刷新：location.reload();
4、 *event对象：事件对象
1、绑定事件：3种
1、在HTML页面上绑定事件
<elem on事件名="js语句"></elem>
缺点：
1、不符合内容（html）与样式（css）与行为（js）的分离的原则
2、无法动态绑定事件（一次只能绑定一个元素）
3、无法同时绑定多个函数对象
2、*在js种使用元素的事件处理函数属性：
elem.on事件名=function(){
操作
}
优点：
1、符合内容（html）与样式（css）与行为（js）的分离的原则
2、动态绑定事件
3、*没有兼容性问题
缺点： 1、无法同时绑定多个函数对象 - 个人觉得其实不是缺点，为什么不把两个功能放到一起
3、使用专门的事件API绑定事件
主流：elem.addEventListener("事件名",callback);
老IE：elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
elem.addEventListener("事件名",callback);
}else{
elem.attachEvent("on事件名",callback);
}
优点：
1、符合内容（html）与样式（css）与行为（js）的分离的原则
2、动态绑定事件
3、同时绑定多个函数对象
缺点： 1、具有兼容性问题
2、事件周期：
主流：3个阶段
1、捕获阶段，记录着要发生的事件有哪些
2、目标元素优先触发，目标元素->实际触发事件的元素
3、冒泡触发，向上触发所有的记录着的事件
老IE：2个阶段，没有捕获阶段
3、 *获取事件对象event：
主流：会自动作为事件处理函数的第一个形参传入
elem.on事件名=e=>{}
老IE：event;
兼容：var e=event；
*获取到event事件对象，我们可以干什么？
1、*获取鼠标的坐标/位置
2、*阻止冒泡 - 笔试面试中：开发几乎不用
主流：e.stopPropagation()
老IE：e.cancelBubble=true
兼容：e.cancelBubble=true
3、 *事件委托/利用冒泡 - 笔试面试开发中
优化：如果多个子元素定义了相同 或 相似的事件，最好只给父元素定义一次
为什么：每次绑定一个事件函数，其实都是创建了一个事件对象，创建的事件对象越多，网站的性能越差
淘汰this：水性杨花，当前元素
认识一个目标元素：target：你点击的是哪一个，永远就是那一个
主流：e.target
老IE：e.srcElement
兼容：e.srcElement
4、*阻止浏览器的默认行为：a标签默认跳转页面，右键自带一个弹出框，F12打开一个控制台，F5会刷新
主流：e.preventDefault()
老IE：e.returnValue=false
兼容：e.returnValue=false
新事件：
window.oncontextmenu=()=>{//鼠标右键事件}
window.onkeydown=()=>{//键盘事件 - 我们不做游戏开发}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a id="a" href="https://www.baidu.com">a标签</a>
<form method="get">
<input id="sub" type="submit"/>
</form>
<script type="text/javascript">
a.onclick=e=>{
e.preventDefault();
}
sub.onclick=e=>{
e.preventDefault();
}
window.oncontextmenu=e=>{
console.log(1);
e.returnValue=false;
}
window.onkeydown=e=>{
if(e.keyCode==112||e.keyCode==116||e.keyCode==123){
e.returnValue=false;
}
}
</script>
</body>
</html>
5、获取键盘的键码：
e.keyCode;
用户一点回车就提交案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="form" method="get">
用户名：<input name="username" />
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
window.onkeydown=e=>{
if(e.keyCode==13){
form.submit();
}
}
</script>
</body>
</html>
扩展：客户端存储技术：
1、cookie：淘汰了，使用很麻烦 - 最大只能传2kb
2、请求消息部分/查询字符串部分/路由 - 也可以存储，但是不适合多页面传输
3、***webStorage：HTML5（综合性概念）提出来的一个新特性：2种
1、sessionStorage - 会话级，只要浏览器一旦关闭，数据就会死亡
2、localStorage - 本地级，永久存在的
1、添加：xxxxStorage.属性名=值
2、获取：xxxxStorage.属性名
3、删除：xxxxStorage.removeItem("属性名")
4、清空：xxxxStorage.clear()
