JavaScript - BOM浏览器对象模型

navigator对象

navigator.appCodeName浏览器代号
navigator.appName浏览器名称
navigator.appVersion浏览器版本
navigator.cookieEnabled启用Cookies
navigator.platform硬件平台
navigator.userAgent用户代理
navigator.systemLanguage用户代理语言

//根据不同的设备加载不同js代码
    console.log(window.navigator);
    var paizi=["Android","iPhone","Windows","OS"];
    var userArgent=window.navigator.userAgent;
    for(var i=0;i<paizi.length;i++)
    {
        if(userArgent.indexOf(paizi[i])!=-1)
        {
            console.log(paizi[i]);
        }
    }

history 对象

• 前进history.go(1) forward()
• 倒退history.go(-1) back()

<a href="javascript:history.go(1)">前进</a>
<a href="javascript:history.go(-1)">倒退</a>

location对象

location对象包含有关当前 URL 的信息

• Location 对象属性 location.href设置或返回完整的 URL
• Location 对象方法 assign() 加载新的文档。reload() 重新加载当前文档。replace() 新的文档替换当前文档

window 对象

属性	描述
onload	页面加载时调用
onunload	离开页面
onfocus	获取焦点时
onblur	失去焦点时
onchang	HTML元素发生改变时触发(常用于输入字段的验证)

内置对象 String Array Math Date
settimeout setinterval
obj={}

• 浏览器窗口的尺寸
  var width=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

鼠标事件

属性	描述
onclick	用户点击某个对象时调用的事件
ondblclick	用户双击某个对象时调用的事件
onmousedown - onmousemove-onmouseup	按下鼠标-鼠标移动 -鼠标松开
onmouseover -onmouseout	鼠标移到元素之上-鼠标从某元素移开

键盘事件

keydown/keyup
keypress

弹框

-window.open("src",'newwindow',···)

• alert();
• prompt(“请输入…”,“1”);
  var x=prompt("显示内容：请输入...","默认输入内容"); x=输入内容
• confirm

if (confirm("显示内容：确认是否退出！")) {
       console.log("确定执行");
   }
   else{
       console.log("取消执行");
   }

屏幕

window.onload()={
	可视区域宽高`document.documentElement.clientHieght/clientWidth`
	body宽高`document.body.clientHeight/clienWidth`
	屏幕实际宽高(包含任务栏)`window.screen.height/width`
	屏幕实际宽高(不包含任务栏)`window.screen.availHeight/availWidth`
	元素宽高`ele.offsetHight/offsetWidth`
	元素偏移宽高`ele.offsetTop/offsetWidth`
	元素在页面位置`ele.pageX ele.pageY`
}

滚动条

window.onscroll=function(){
滚动条整体宽高=页面实际高`document.documentElement.scrollHeight`
滚动条偏移距`ele.scrollX/scrollY`
当前视图中的实际元素的和边缘之间的距离`ele.scrollTop/scrollLeft`
// 滑动条接近底部 : 滑动条高度 -滑动条偏移高度 -页面可视高度 ~ 0
document.documentElement.scrollHeight - this.scrollY - document.documentElement.clientHeight<5
}

滚轮事件

window.onmousewheel=function(e){
    console.log(e);  

上滑e.deltaY<0
下滑e.deltaY>0

鼠标事件发生时

ele.onclick=function(){
`e.clientX/Y`鼠标事件时相对于客户端窗口的水平坐标位置
`e.pageX/Y`相对于整个文档的以像素为单位的只读属性
`e.timeStamp  `时间间隔ms
`e.srcElement  e.target  `目标元素
}

键盘

window.onkeypress = function (e) {
//e--KeyboardEvent 
key: "w"
code: "KeyW"
charCode: 119
keyCode: 119
which: 119
type: "keypress"
target: body //目标元素
timeStamp: 1531.0799999970186 //时间间隔ms
}