Bom

常用对象：window、screen、history、location、navigator、event

1、history

保存当前窗口的历史记录（历史url）

前进:history.go(1);

后退:history.go(-1);

*刷新:history.go(0);

2、location

保存当前窗口的正在打开的url

1、一个url由5部分组成

协议://域名:端口号/文件路径?查询字符串

协议：http/https（请求响应模式）/ftp（传输文件）/ws（广播收听模式：直播） - 网页的功能不同

主机号/域名：www.baidu.com/127.0.0.1 -域名需要购买，而且127.0.0.1只能访问自己

端口号：:8020 - 默认端口：http - 80 https - 443，默认端口可以省略不写

文件的相对路径：new/01-3.html /s -表示加密了

查询字符串：?wd=178&rsv_spt=1... - 表单提交到服务器的东西 - 请求消息

2、属性

console.log(location);输出可查看属性

3、API:跳转

location="新url";
location.href="新url";
location.assign("新url");

以上三个操作功能相同都是跳转页面，意味着以后不一定非要用a标签跳转

替换后禁止后退：location.replace("新url");
刷新：location.reload();

3、navigator

保存了当前浏览器的信息（浏览器的名称/版本号）

属性：navigator.userAgent;

4、event:事件对象

事件:多半由用户触发或浏览器自动

1、绑定事件

（1）在HTML元素上绑定

<elem on事件名="js语句"></elem>

缺点：①没有实现JS与HTML的分离 - 要HTML（内容）/CSS（样式）/JS（行为）分离；

②无法动态绑定事件 - 一次只能绑定一个元素

③无法同时绑定多个函数对象

（2）使用JS的事件属性绑定：

elem.on事件名=function(){
    js语句
}

优：①实现JS与HTML的分离；②动态绑定事件

缺：无法同时绑定多个函数对象

（3）使用JS的API绑定事件：

主流：elem.addEventListener("事件名",callback)
老IE：elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
        elem.addEventListener("事件名",callback)
    }else{
        elem.attachEvent("on事件名",callback);
    }

优：①实现JS与HTML的分离；②动态绑定事件；③同时绑定多个函数对象

缺：需要处理兼容性问题

2、事件周期

主流：1、捕获阶段：由外向内，记录着要执行的事件

2、目标触发：当前点击的元素优先出发

3、冒泡触发：由内向外的冒泡触发事件

老IE:没有捕获阶段

3、获取事件对象的event：

主流：事件函数中传入一个形参e，就可以自动接住事件对象event

老IE：window.event;

兼容：event;不光老IE可用，主流浏览器也可以使用

获取事件对象event后可做的操作：

（1）获取鼠标位置

（2）阻止冒泡：

主流：e.stopPropagation();
老IE：e.cancelBubble=true;
兼容：if(e.stopPropagation){
            e.stopPropagation()
        }else{
	e.cancelBubble=true;
        }

（3）事件委托（利用冒泡）

把事件都绑定在自己的父元素身上

获取目标元素：触发的元素

主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;不光老IE可用，主流浏览器也可以使用

（4）*阻止浏览器的默认行为

例：F5带来的刷新，F12带来的控制台，右键带来的菜单框，F11全屏，a自带跳转，submit自带提交...

主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：if(e.preventDefault){
        e.preventDefault()
      }else{
        e.returnValue=false;
      }

新事件：

1、鼠标右击：window.oncontextmenu
2、键盘事件：window.onkeydown

（5）*获取键盘的键码

e.keyCode；

扩展

*****客户端存储技术 - 以前使用cookie（缺点：大小有限2kb，30天必死），HTML5提出了一个新概念webStorage：2种（优：大小有限8mb，生命周期无限，缺点：老IE不支持）

1、localStorage：本地级 - 浏览器关闭甚至电脑关闭，第二天打开依然存在

2、sessionStorage：会话级 - 浏览器一旦关闭自动死亡

作用：①数据可以跨页面传输；②皮肤、主题；③浏览器的历史记录

语法：类似于对象：

添加：xxxxStorage.属性名="值";
获取：xxxxStorage.属性名;
删除：xxxxStorage.removeItem("属性名");//只会删除这一个
清空：xxxxStorage.clear();//删除所有

Bom_02

Bom