浏览器window对象及事件

浏览器window对象

location对象

window.location === document.location (true)

解析URL

location的href属性是一个字符串，包含URL完整文本
protocol，host，hostname，port，path name，search表示url的各个部分
重点 hash 和 search 属性
1. hash返回“片段标识符”即#之后的内容
2. search返回？之后的url

载入新文档

assgin() 使窗口载入并显示指定URL中的文档，保留浏览历史；
replace（）与assign类似但是不保留浏览历史，ex：如果不支持ajax就location.replace()到另外一个文档

reload（）重新加载当前文档

location = "baidu.com"; // 跳转外链
location = "page1.html"; // 跳转到下一个页面
location = "#top"; // 跳转到锚点，top表示跳转到文档顶部
location.search = "?page=" + ()pagenum + 1); // 新页面

Screen对象

提供有关窗口显示大小和可用颜色数量的信息

属性 width和height指的是以像素为单位的窗口大小。
availWidth和alailHeight指的是实际可用显示大小，除却dock栏。

事件

冒泡和捕获

一般是在冒泡中为节点添加事件；

事件处理

html级： <div onclick="alert(event.type)">

dom0级：每个元素都有自己的事件处理属性；

var btn = document.getElementById('myBtn');
btn.onclick = function(){
alert(this.id) // "myBtn" this指向当前元素 冒泡阶段被处理
}
btn.onclick = null; // 删除事件处理程序

dom2级： addEventListener 和 removeEventListener

 var btn = document.getElementById("myBtn");
 btn.addEventListener("click", function(){
     alert(this.id);
 }, false)
 btn.addEventListener("click", function(){
     alert("Hello World!");
 }, false)
 // 最后一个参数true表示在捕获阶段触发，false表示在冒泡阶段触发
 // 通过 addEventListenr 添加的事件必须通过 removeEventListener 删除 在删除的时候 function必须是具名函数才能够删除，否则是无效的
 var handler = function(){};
 addEventListner("click", handler, false);
 removeEventListner("click", handler, false);

tip：event.stopPropagation()可以阻止事件冒泡，就只事件对象本体触发

IE 呵呵

事件对象

UI

load window.onload / img.onload 嵌入内容加载完毕时在对象上触发tip所有内容加载完毕，包括css，js，dom
unload 嵌入内容卸载完毕触发
abort 用户停止下载过程，如果嵌入内容没有加载完成，在加载对象上触发
error window.error js代码出错时候，img加载出错时候；
select 略
resize window.resize 窗口大小发生变化时；
scroll 滚动带滚动条元素时，在该元素上触发；
DOMContentLoaded Dom树完成就会触发，早于load事件；
hashchange #url发生变化；window.onhashchange = function (event){};
**orientationchange (safari)/ deviceorientation ** 设备方向
devicemotion 设备移动
tip: window上发生的任何时间都可以在<body/>中通过相应特性来指定<body onload="alert('Loaded')></body>"
```
<body onload="alert('Loaded')></body>// way 1
window.addEventListener('load', function(){}); // way 2
window.onload=function(){}; // way 3
```

焦点 blur focus

鼠标滚轮事件

click，dbclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup

tip：clientX和clientY相对于视口位置，pageX和pageY相对于文档的位置。页面不滚动的情况下，二者相等；screenX和screenY相对于屏幕的位置

鼠标按钮事件

button属性0，1，2，3，4，5，6，7

contextmenu上下文菜单，鼠标右键

window.onload = function() {
var div = document.getElementById("myDiv");
div.addEventListener("contextmenu", function(event){
    event.preventDefault();
})
}

性能优化

为元素添加大量的事件处理程序会占用过高的内存，影响整体性能；处理这种情况：

事件委托

利用事件冒泡，指定一个事件处理程序管理某一类型的所有事件，尽量向最高层级中添加事件处理程序。例如

ul li li li 
ul.onlick = function() {
    switch (target) {
    case li1:
    case li2:
    case li3:
}}

移除事件处理程序

li.onclick = null/removeEvent

模拟事件

！！！

DOM操作

scrollIntoView dom.scrollintoView() true/false true顶部对其，false底部对其
scrollByPage safari chrome
scrollTop scrollLeft 隐藏的高和宽 scrollHeight scrollWidth doc总高宽