9-14 钟申义 日志

使用BOM

window对象（三个功能）

代替ES标准中的global，充当全局作用域对象

包含所有 ES、DOM、BOM 的所有可直接使用的对象和函数

window 还代表当前窗口的信息，也能操作当前窗口

获取或设置窗口大小

完整窗口大小 window.outerWidth 浏览器窗口宽度 window.outerHeight浏览器窗口高度

仅用于显示网页区域的大小 window.innerWidth网页宽度 window.innerHeight网页高度

响应窗口大小改变事件 window.onresize window.onresize=function(){

console.log(浏览器窗口大小: ${window.outerWidth} x ${window.outerHeight});

console.log(`浏览器网页大小: ${window.innerWidth} x ${window.innerHeight}`);   }

打开窗口 /window./open("url","name","configuration")

关闭窗口 /window./close()

screen

screen.height 返回浏览器的高度 screen.width 返回浏览器的宽度 screen.availWidth返回浏览器的宽度(除windows任务栏之外) screen.availHeight 返回浏览器的高度(除windows任务栏之外) screen.updateInterval 返回浏览器刷新频率 screen.colorDepth 返回浏览器的色深

history

使用history history.go(n) history.back history.forward

navigator

plugins 提示：用于判断是否安装了某个插件，所有已安装的插件信息都放在了：navigator.plugins 集合中，插件的全称就是这个插件在集合中的下标

userAgent 提示：浏览器的名称、版本号、内核放在 navigator.userAgent之中

cookieEnabled 提示：用于判断浏览器是否启用 cookie，返回值为一个布尔值，如果已启动 cookie，则navigator.cookieEnabled 返回 true

事件模型

捕获阶段 当事件发生时，浏览器从根节点 document 开始，由外向内浏览当前触发事件的元素的各级父元素，并记录各级父元素上绑定的相同事件处理函数。但是，该阶段只记录，不调用

目标触发 优先触发当前点击的这个目标元素上的事件处理函数

冒泡执行 浏览器会按捕获阶段记录的各级父元素上绑定的事件的反向顺序，由内向外执行各级父元素上的事件处理函数

操作事件对象

取消冒泡/停止蔓延 e. stopPropagation(); e.stopPropagation() 只阻止外层事件的执行，不阻止当前元素自己事件的执行。所以，在当前元素处理函数中，e.stopPropagation() 写前写后无所谓。对当前元素的事件执行都没有影响

利用冒泡/事件委托 因为浏览器触发事件，采用的是遍历所有事件监听对象的方式，所以，监听对象越多，遍历越慢，事件响应速度越慢。反之，监听对象少，遍历快，事件响应的速度就快

取消事件/阻止默认行为 使用 e.preventDefault() 阻止默认行为

获取鼠标位置坐标

相对于屏幕左上角 e.screenX/screenY

相对于浏览器中网页的左上角 e.clientX/clientY

相对于触发事件元素的左上角 e.offsetX/offsetY

页面滚动

页面滚动事件 window.onscroll

获得页面滚动的高度（当前页面在窗口中向下滚动了多少距离） 兼容写法 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollTop=document.documentElement.scrollTop+document.body.scrollTop;

获得页面滚动的宽度（当前页面在窗口中向右滚动了多少距离） document.body.scrollLeft document.documentElement.scrollLeft

鼠标滚轮事件

onmousewheel事件 DOMMouseScroll事件 使用attachEvent添加事件

心得

回来的第一天，感觉学习状态感觉还行，感觉js的以前的知识基础非常不牢固，需要多多复习！