JS Bom对象

BOM（浏览器对象模型）

其核心对象是window
DOM和BOM对比：
DOM

• 文档对象模型
• DOM就是把文档当作一个对象来看待
• DOM的顶级对象是document
• DOM学习的是操作页面元素
• DOM是W3C标准规范

BOM

• 浏览器对象模型
• 把浏览器当作一个对象来看待
• BOM的顶级对象是window
• BOM学习的是浏览器窗口交互的一些对象
• BOM是浏览器厂商再各自浏览器上定义的 兼容性较差

BOM比DOM更大 ，它包含DOM

名称	内容
BOM对象	window、history、location
内置对象	String、Array、Math、Date、Number
计时器对象	settimeout、setinterval
自定义对象	object

window对象的常见事件

1、window.onload是窗口（页面）加载事件

window.onload=function(){}
或者
window.addEventListener("load",function(){});

2、滚轮事件

window.onmousewheel = function (e) {
        if (e.deltaY < 0) {     // 判断方向            
            console.log("上滑");
        }
        else {
            console.log("下滑");
        }
    }

滚轮事件中，e.deltaX 和 e.deltaY 可以反映出滚轮的方向，

e.deltaX 是负数，滚轮向左，e.deltaX 是正数，滚轮向右；

e.deltaY 是负数，滚轮向上，e.deltaY 是正数，滚轮向下。

3、手机触屏事件

    var startx, starty, endx, endy
    window.addEventListener("touchstart", function (e) {
            
        var touch = e.touches[0]; //获取第一个手指
        startx = touch.pageX;
        starty = touch.pageY;
    })
    window.addEventListener("touchmove", function (e) {
        var touch = e.touches[0];
        endx = touch.pageX;
        endy = touch.pageY;
    })
    window.addEventListener("touchend", function (e) {
  
        //区分四个方向
        var clientx = endx - startx;  //正负代表左右
        var clienty = endy - starty;
        if (Math.abs(clientx) > Math.abs(clienty) && clientx > 0) {
            console.log("right");
        }
        else if (Math.abs(clientx) > Math.abs(clienty) && clientx < 0) {
            console.log("left");
        }
        else if (Math.abs(clientx) < Math.abs(clienty) && clienty > 0) {
            console.log("down");
        }
        else if (Math.abs(clientx) < Math.abs(clienty) && clienty < 0) {
            console.log("up");
        }
    })
    
  //  event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动

touchstart 和 touchmove 事件中有下列三个参数：
e.touches 位于屏幕上所有手指的列表
e.targetTouches 位于该元素上的所有手指的列表
e.changedTouches 涉及当前事件的所有手指列表

clientX / client 触摸点相对浏览器窗口的位置 pageX / pageY 触摸点相对于页面的位置
screenX / screenY 触摸点相对于屏幕的位置 identifier touch对象的ID targe
当前的DOM元素

4、弹框

 //1、警告框
     alert("提示！");
 // 无返回值
 //2、输入框
     var x=prompt("请输入...","1");
     console.log(x);
//有返回值，点击确认按钮，返回值为输入的值，点击取消按钮，返回值是null
//3、确认框
     var a=confirm("确认是否退出");
     console.log(a);
//有返回值，点击确认返回true，点击取消，返回false

5、关闭页面和打开页面

// 1.关闭页面
 window.close();
 
// 2.打开页面 
 window.open("url", '_blank', "width=200,height=200,left=0,top=0,toolbar=no,menubar=no,
 scrollbars=no, resizable=no, location=no, status=no");
// url:  如果是网址，则打开该网页，如果是空的，则打开一个空白页
// _blank:  打开新窗口
// width 窗口宽度， height 高度，left 左边的距离,top 上边的距离
// toolbar 工具栏, menubar 菜单栏,scrollbars, resizable, location, status： 值为yes / no

history对象

history对象方法	作用
back（）	后退功能
forward	前进功能
go（参数）	前进后退功能 参数是1 前进一个页面 参数是-1 后退一个页面

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

location对象

location对象方法	返回值
location.assign()	和href一样 可以跳转页面
location.replace()	替换当前页面
location.reload()	重新加载页面

location.href="http://www.baidu.com";    // 跳转到百度

navigator对象

userAgent属性
返回由客户机发送服务器的 user-agent 头部的值。