JS Bom对象 window location history

一、Bom ( 浏览器对象模型 )

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

二、window

1. 滚轮事件

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 是正数，滚轮向下。
2. 页面关闭 / 刷新事件

onunload 与 onbeforeunload 的区别：

1. onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
2. onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换当前页面时调用。onunload是无法阻止页面的更新和关闭的。而 onbeforeunload 可以做到。

3. 手机触屏事件

    var startx, starty, endx, endy,zx,zy;
    window.addEventListener("touchstart", function (e) {
         // touchstart 和 touchmove 事件中有下列三个参数：
         // e.touches 位于屏幕上所有手指的列表
         // e.targetTouches  位于该元素上的所有手指的列表
         // e.changedTouches  涉及当前事件的所有手指列表
         
        var touch = e.touches[0]; //获取第一个手指
        // 每个参数有以下坐标属性：
         // e.touches[0].pageX;  第一个手指相对于页面的X坐标
         // e.touches[0].pageY;  第一个手指相对于页面的Y坐标
         // e.touches[0].clientX; 第一个手指相对于可视区的X坐标
         // e.touches[0].clientY; 第一个手指相对于可视区的Y坐标
         // e.touches[0].screenX;  第一个手指相对于屏幕的X坐标
         // e.touches[0].screenY;  第一个手指相对于屏幕的Y坐标
        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) {
    //touchend事件中，e.touches和e.targetTouches中没有元素，e.changedTouches中有元素
     //  var touch = e.changedTouches[0]; 
     //   endx = touch.pageX;   
     //   endy = touch.pageY;
     // touchemove事件中的e.touches最后的坐标值和touchend事件中e.changedTouches的坐标值相等。
     
        //区分四个方向
        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（） //阻止触摸时浏览器的缩放、滚动条滚动

4. 弹框

 // 1.警告框
    alert("提示！");       //没有返回值
    
 // 2.输入框
    var a=prompt("请输入...", "1");
    console.log(a);
 // 输入框有返回值，如果点击确认按钮，返回值为输入的值；点击的是取消按钮，返回值是null

 // 3.确认框
    var b=confirm("确认是否退出！");
   console.log(b);  
 //确认框有返回值，如果点击确认按钮，返回值为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:  打开新窗口
// _self:  原窗口打开，替换当前窗口
// _parent:   原窗口打开      区别？？？？？？？？？？？
// width 窗口宽度， height 高度，left 左边的距离,top 上边的距离
// toolbar 工具栏, menubar 菜单栏,scrollbars, resizable, location, status： 值为yes / no

6. window.navigator

属性	含义
window.navigator	包含有关浏览器的信息
window.navigator.appCodeName	返回浏览器的代码名。
window.navigator.appName	返回浏览器的名称
window.navigator.appVersion	返回浏览器的平台和版本信息。
window.navigator.platform	返回运行浏览器的操作系统平台。
window.navigator.userAgent	返回由客户机发送服务器的 user-agent 头部的值。

三、location

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

四、history

// 历史页面前进、后退的两种方法：

// 方法 1. history.go()
<a href="javascript:history.go(1)">前进</a>       // go(1) 前进一个页面  go(n) 前进n个页面
<a href="javascript:history.go(-1)">倒退</a>      // go(-1) 后退一个页面  go(-n) 后退n个页面

// 方法 2. history.back()   history.forward()
<a href="javascript:history.back()">前进</a>      // history.back()  后退一个页面
<a href="javascript:history.forward()">倒退</a>   // history.forward()  前进一个页面