BOM

什么是BOM?
BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
Window对象
window对象是js中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。
拖拽事件

名称	作用
dragstart	在拖动时触发
dragend	在拖动完成时触发
dragenter	目标元素上绑定dragenter事件,当拖拽元素进入目标元素时触发
dragover	目标元素上绑定dragover事件, 当拖拽元素在目标元素上移动时触发
drop	目标元素上绑定drop事件, 并同时取消当前目标元素的dragover的默认事件, 当拖拽元素在目标元素上同时鼠标放开时触发事件.drop与dragend同时绑定时drop事件先触发

//开始拖动
 document.ondragstart = function (e) {
  e.dataTransfer.setData("key", e.target.id);
 }
//拖动过程
 document.ondrag = function (e){}
 //进入另一个容器时
 document.ondragenter = function (e) {
 e.target.style.border="1px dashed red";
}
//进入另一容器内部拖拽
 document.ondragover = function (e) {
 e.preventDefault();//阻止默认事件
}
//离开进入的容器
document.ondragleave=function (e){
 e.target.style.border="";
}
//drop目标元素上绑定drop事件, 并同时取消当前目标元素的dragover的默认事件, 当拖拽元素在目标元素上同时鼠标放开时触发事件.
 document.addEventListener("drop", function (e) {
 var id = e.dataTransfer.getData("key");
 e.target.appendChild(document.querySelector("#" + id));
 e.target.style.border="";
});
 //拖动完成
 document.ondragend = function (e) {
   console.log("拖动完成：" + e.target);
}

滚动事件

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");
        }
    })