浏览器window对象
location对象
window.location === document.location (true)
解析URL
- location的href属性是一个字符串，包含URL完整文本
- protocol，host，hostname，port，path name，search表示url的各个部分
- 重点 hash 和 search 属性
- hash返回“片段标识符”即#之后的内容
- 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.errorjs代码出错时候，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总高宽
网友评论