9-14 钟申义 日志

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的以前的知识基础非常不牢固,需要多多复习!

评论

this is is footer