1. history:
什么是: 保存当前窗口打开后，成功访问过的url的历史记录栈。
特点: 内容不对开发人员开放，更无法修改
如何使用: 前进，后退，刷新
前进: history.go(1)
后退: history.go(-1)
刷新: history.go(0)

2. location:
什么是: 保存当前窗口正在打开的url的对象
何时使用:
1. 跳转: 只能实现在当前窗口打开
location.href="http://www.mamicode.com/url";
location.assign("url");
location="url"
2. 重新加载当前页面:
location.reload(false/true);
参数: force 表示是否强制从服务器硬盘获取最新文档。
3. 在当前页面打开，禁止后退:
location.replace("url");
打开新url，并用新url替换history中当前旧url，实现禁止后退

属性: http://tmooc.cn:8080/orders/orderDetails/index.html?username=zhangdong&kw=大鱼
#top
location.protocol: 协议
.host: 主机名+端口号
.hostname: 主机名
.port: 端口
.pathname: 相对路径
.search: ?及其之后的查询字符串
.hash: #锚点名

3. navigator:
包含了所有浏览器的配置信息: 没有标准
1. 判断cookie是否启用:
navigator.cookieEnabled
2. 判断是否安装了指定插件(plugin)
navigator.plugins集合
3. 判断浏览器名称和版本号(只支持5大浏览器)
navigator.userAgent

event:

什么是:浏览器自动触发或用户手动触发的页面元素状态的改变。
比如: change click focus blur
事件处理函数:当事件发生时，自动触发执行的函数。
事件处理函数其实就是元素的一个特殊属性
属性的值是一个函数对象
比如: onchange onclick onfocus
elem.onclick=function(){...}
当事件发生时，自动执行: elem.onclick();

如何绑定事件处理函数: 3种:
1. 在html中绑定:
<elem onXXX="js语句"
<button onclick="fun(this)"
fun(obj){obj->btn this->window }
button.onclick=function(){
//this->btn
eval("fun(this)"); //obj->btn
}
问题: 1. 不符合内容和行为分离的原则
2. 其实不是真正的绑定，只是传入一条js语句而已。
2. 在js中动态绑定:
1. elem.onxxx=function(){
this->elem
}
问题: 1. 一个事件处理函数只能绑定一个函数对象。
2. 无法改变事件触发的顺序
2. DOM:
elem.addEventListener(
"事件名",fun,false/true
);
为elem元素的指定"事件"，绑定fun
第三个参数: 设置是否在捕获阶段触发
优: 1. 为一个事件处理函数，绑定多个函数对象。当事件发生时，可同时执行多个任务。
2. 可以改变事件触发的顺序
vs IE8: elem.attachEvent(
"on事件名",fn
);//没有第三个参数

DOM事件模型:
3个阶段:
1. 捕获:由外向内，依次记录各级元素绑定的事件处理函数
捕获阶段只到目标元素截止
2. 目标触发: 默认实际触发事件的元素上的处理函数先执行。
目标元素: 实际触发事件的元素
3. 冒泡: 按照捕获阶段反向的顺序，依次执行各级父元素上的事件处理函数

vs IE8: 事件模型:2个阶段：目标触发,冒泡

event:事件对象:
当事件发生时，自动创建的，封装事件信息的对象。
如何获得: 发生事件时，自动调用事件处理函数。此时js会将事件对象默认作为事件处理函数的第一个参数，放入函数。——DOM
elem.addEventListener(
"事件名",function(e){
//e->event
});
vs IE8: 事件对象保存在全局变量event中
不作为第一个参数传入
兼容DOM和IE8：
e=e||window.event
如果e有效，就用e，否则用event

取消冒泡: 执行完当前元素的事件处理函数后，阻止冒泡向上执行。
e.stopPropagation();
vs IE8:
e.cancelBubble=true;

利用冒泡:
优化: 尽量减少事件监听的个数
办法: 如果多个子元素绑定相同的事件处理函数，则只需要将事件处理函数绑定在父元素一次即可！
问题: 如何获得目标元素:
this->会随冒泡而改变
解决:e.target 始终保持目标元素
vs IE8: target=e.target||e.srcElement
DOM IE8

取消事件:在事件执行过程中，如果出现问题，可阻止事件继续执行。
更多是取消默认行为！
如何取消:
e.preventDefault();
vs return :
preventDefault阻止后续默认行为
不是停止当前函数执行
放前放后，对当前函数无影响
return: 退出当前函数执行
但不阻止默认行为的执行

事件坐标:
1. 相对于屏幕左上角:
e.screenX/Y
2. 相对于文档显示区左上角:
e.clientX/Y
兼容性问题: e.x/y
3. 相对于所在的父元素左上角:
e.offsetX/Y

Dom笔记（五）