BOM&Event

BOM

BOM：Browser Object Model，定义了一些JS操作浏览器的方法。

`windows.open('url','_self||_bank');`//打开一个新的页面。

(url为空默认是新的空白页面,打开方式为空默认打开一个新的页面)。~全为空就是用在新窗口页面打开一个空白页面~

返回值：返回新打开的窗口的`window`对象
        opener=window.open('http://www.baidu.com');//不单单是赋值，也会去执行
        alert(opener ===window);//false

        opener.document.body.style.backgroundColor = 'red';//如果打开的是另外一个域名的网站就会涉及到跨域的问题，会禁止去修改。

浏览器大部分属性是在window下的。window代表的是窗口

在JS定义中，如果前面是window可以省略不写

//window.close();

//在本窗口打开新打开的窗口
opener = window.open();
window.close();

//获得浏览器信息
console.log(window.navigator.userAgent);

    document.write(window.navigator.userAgent);
    if(window.navigator.userAgent.indexOf('MSIE')!=-1){
        alert('我是IE');
    }else{
        alert('我是正规浏览器');
    }

//window.location是一个对象

console.log(window.location+'
');

console.log(window.location.href+'
');//与loation相同

console.log(window.location.search+'
');//显示？号后面的

console.log(window.location.hash+'
');//显示#号后面的

2-文档宽高及窗口事件

//clientWidth可视区的宽
//clientWidth可视区的高

//document是一个文档对象，没有尺寸。documentElement是文档元素，有尺寸
document.write('Document的宽是'+document.documentElement.clientWidth);

//滚动条滚动距离
//在chrome里认为滚动条是属于body的

alert(document.documentElement.scrollTop||scrollLeft);

alert(document.body.scrollTop||scrollLeft);//在chrome里面

//兼容处理

        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

varurr =0||1;//0是会隐士转换为false

//元素的内容高于内容宽。内容高：实际上内容显示的高度，溢出的内容块也计算在内。

        alert('div1的内容高是'+getDiv1.scrollHeight);
        alert('div1的内容宽是'+getDiv1.scrollWidth);

//文档高与文档宽：offsetWidth||offsetHeight。
//在IE中[IE10-]，认为文档高与可视区的高是一样的

        alert('文档高是'+getDiv1.offsetHeight);
        alert('内容高是'+getDiv1.offsetWidth);

_{body个margin值是8px}

//BOM[window]对象下的两个事件

//触发事件的单位是时间
 window.onscroll//当页面滚动的时候触发
window.onresize//当页面大小发生滚动的时候触发

焦点事件

//焦点：浏览器能够区分用户的操作。
//只有能够响应用户操作的才有焦点
/*一般焦点设置的几种方式
1.click
2.table
3.js

*/

    //onfocus 当元素获取到焦点的时候触发
    getInput.onfocus = function(){

        if(this.value=='请输入文字'){

            this.value = '';
        }

    }
    //失去焦点事件
    getInput.onblur = function(){
        if(this.value==''){
            this.value = '请输入文字';
        }
    }

obj.focus();//给指定的元素设置焦点
     obj.blur();//取消指定元素的焦点
     obj.select();//选中指定元素的文本内容。chrome FF 是不允许直接操作用户的鼠标.能选中的只能是用户输入的内容

event事件对象和clientX,clientY

//evnet:事件对象:当一个事件发生之时，事件详细信息被临时保存到的集合

//IE，chrome有一个内置全局对象，
//FF 等标准浏览器event被保存在事件函数的第一个参数。[事件函数：事件发生调用的函数]


    function fn1(ev){//兼容解决办法
        var ev = ev||event;//非标准对象第一个返回false
    }

clientX||clientY:当一个事件发生的时候，鼠标相对于页面可视区的距离

    document.onmousemove = function(ev){

        var ev = ev||event;
        var T = document.documentElement.scrollTop||document.body.scrollTop;
        var L = document.documentElement.scrollLeft||document.body.scrollLeft;
        document.title = i++;
        getDiv.style.left = L+ev.clientX+'px';
        getDiv.style.top = T+ev.clientY+'px';

    }

事件流，事件冒泡机制

//冒泡:当一个元素接收到事件的时候，会把他接收到的事件传播给他的父级[的父级...]

//正确的解释是给元素添加事件处理函数

//类比：我在马路边捡到一分钱，交给警察叔叔。钱没有交给警察叔叔，钱也是捡到了。

//事件冒泡的机制是默认是存在的

//这样就会出现问题
    input.onclick = function(){
        div.style.display = 'block';
    };

    document.onclick = function(){
        div.style.display = 'none';
    }

//阻止冒泡：在阻止冒泡的事件函数中调用        ev.cancelBubble = true;
//阻止冒泡[add调用事件]：在阻止冒泡的事件函数中调用        ev.stopPropagation();
//只能单独去阻止事件。//阻止click，不回去阻止onmouseover

事件绑定的第二种形式

//事件捕获必须在事件绑定的第二种方式

obj.onclick //是赋值的形式，会覆盖掉
obj.addEventListener();//可以避免掉赋值的问题

//在IE下，这两个的执行顺序在IE下是不一样的。
div1.attachEvent('onclick',function(){//没有捕获参数
        alert('hello world');
    });//使用this，弹出的是window
//标准下

div.addEventListener('click',fn,是否捕获[默认是false冒泡,true是捕获]);

div1.attachEvent
1.没有捕获
2.时间名称有on
3.函数执行的顺序：标准->正序；非标准->倒序
4.this指向window



div.addEventListener('click',function(){});
1.有捕获
2.事件名称没有on
3.事件函数执行顺序正常
4.this正常

function fn1(a,b){
        alert(this);
        alert(a+b);
    }

    //调用call的同时，可以去传参.并且this指向参数。
    //fn(); === fn1.call();
    //一般使用call是用来改变函数里的this的指向问题
    //call();//第二个参数开始就是原函数的参数列表
    //如果call();第一个参数是空，是不改变this指向，this会指向原本应该改变的this
    fn1.call(1,2,3);

    function fn1(){
        alert(this);
    }

    function fn2(){
        alert(1);
    }

    //两个添加事件函数的兼容模式

    function bind(obj,evName,fn){

        if(obj.addEventListener){
            obj.addEventListener(evName,fn,false);
        }else{
            obj.attachEvent('on'+evName,function(){
               fn.call(obj);
            });
        }

    }

    bind(document,'click',fn1);
    bind(document,'click',fn2);

//兼容方式

事件捕获

//先从外面到里面[捕获]，再从里面倒外面[冒泡]。

事件的取消

//有两种方法

//onclick 通过赋值为其他值。[不要改变变量类型，null赋给点击事件]
obj.onclick = function;

  //IE:时间名称和函数与注册要一一致。
//obj.attachEvent('onclick',fn1);
    obj.detachEvent('onclick',fn1);

//标准：(事件，事件函数,类型)

div1.removeEventListener('click',function(){},false);

键盘事件

//onkeydown 与onkeyup

要知道事件发生的细节需要用到event对象

event.keyCode返回的是ascii码

ctrlKey  shifrtKey altKey //boolean

     enter keyCode = 13;

//不是所有元素都能够接收键盘事件，是能够相应用湖输入的元素

    //document可以接收焦点。焦点是在默认文档上

//onkeydown 按下不抬起会连续触发，但是会有一个延迟时间


/*
*      38
* 37   40   39
* */

//按下不抬起会连续触发,解决办法是设置定时器。
    var getDiv = document.getElementById('div1');

    document.onkeydown = function(ev){
        var ev = ev||event;

        switch (ev.keyCode){
            case 37:
                getDiv.style.left = getDiv.offsetLeft -10 +'px';
                break;
            case 38:
                getDiv.style.top = getDiv.offsetTop -10 +'px';
                break;
            case 39:
                getDiv.style.left = getDiv.offsetLeft +10 +'px';
                break;
            case 40:
                getDiv.style.top = getDiv.offsetTop +10 +'px';
                break;

        }
    }

//解决延时。抬起是清除事件
 var oDiv = document.getElementsByTagName('div')[0];
    var timer = null;

    document.onkeydown = function(ev){
        clearInterval(timer);
        var ev = ev||event;

        timer = setInterval(function(){

            switch (ev.keyCode){
                case 37:
                    oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
                    break;
                case 38:
                    oDiv.style.top = oDiv.offsetTop - 10 + 'px';
                    break;
                case 39:
                    oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
                    break;
                case 40:
                    oDiv.style.top = oDiv.offsetTop + 10 + 'px';
                    break;
            }
        },10);
    }
    document.onkeyup = function(){
        clearInterval(timer);
    }

事件默认行为-默认事件

//事件发生的时候，浏览器默认运行的行为。

阻止事件行为：在事件处理函数中添加return false;

document.oncontextmenu //右键环境菜单

//模拟右键菜单

    var getDiv = document.getElementsByTagName('div')[0];

    document.oncontextmenu = function(ev){

        var ev = ev||event;

        getDiv.style.display = 'block';
        getDiv.style.left =ev.clientX +'px';
        getDiv.style.top =ev.clientY +'px';
        return false;
    }

    document.onclick = function(){
        getDiv.style.display = 'none';
    }

拖拽的原理

 /*
    * 由三大事件组成
    * onmousedown选中元素
    * onmousemove拖拽元素.有间隔时间
    * onmouseup释放元素
    * */

    var getDiv = document.getElementsByTagName('div')[0];

    getDiv.onmousedown = function(ev){

        var ev = ev||event;

        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;


        document.onmousemove = function(ev){
            var ev = ev||event;

            getDiv.style.left = ev.clientX - disX +'px';
            getDiv.style.top = ev.clientY - disY +'px';

        }

        document.onmouseup = function(){
            document.onmousemove =document.onmouseup=null;
        }
    }

拖拽的问题以及解决办法

 /*
    * 拖拽的时候，有文字被选中，会产生问题
    *
    * 原因：鼠标按下的时候，如果页面有文字被选中，会触发浏览器的默认拖拽文字的效果
    * | 
    * V
    * 是 onmousedown 的默认效果->标准浏览器:return false;
    *
    * */

    /*
    *
    * IE:全局捕获.:打劫事件，没有被分享，而是被抢过去了。
    *
    * FF：有但不执行
    *
    * Ch：没有
    *
    * 当给一个元素设置全局捕获以后，那就元素监听以后发生的所有事件。当事件发生的时候，就会被当前设置全局捕获的元素所触发。
    *
    * */
    var getDiv = document.getElementsByTagName('div')[0];

    getDiv.onmousedown = function (ev) {

        var ev = ev || event;

        var disX = ev.clientX - this.offsetLeft;
        var disY = ev.clientY - this.offsetTop;

        if(getDiv.setCapture){
            getDiv.setCapture();
        }

        document.onmousemove = function (ev) {
            var ev = ev || event;

            getDiv.style.left = ev.clientX - disX + 'px';
            getDiv.style.top = ev.clientY - disY + 'px';

        }

        document.onmouseup = function () {
            //释放全局捕获
            if(getDiv.releaseCapture){
                getDiv.releaseCapture();
            }
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }

拖拽的封装

function drag(obj){
        obj.onmousedown = function (ev) {

            var ev = ev || event;

            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop;

            if ( obj.setCapture ) {
                obj.setCapture();
            }

            document.onmousemove = function (ev) {
                var ev = ev || event;

                var L = ev.clientX - disX;
                var T = ev.clientY -disY;

                if(L<0){
                    L=0;
                }else if(L>document.documentElement.clientWidth-obj.offsetWidth){
                    //文档元素的宽度减去元素自身的宽度
                    L = document.documentElement.clientWidth-obj.offsetWidth;
                }

                if(T<0){
                    T=0;
                }else if(T>document.documentElement.clientHeight-obj.offsetTop){
                    //文档元素的宽度减去元素自身的宽度
                    T = document.documentElement.clientHeight-obj.offsetHeight;
                }

                obj.style.left =L + 'px';
                obj.style.top = T + 'px';

            }

            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;


                if ( obj.releaseCapture ) {
                    obj.releaseCapture();
                }
            }
            return false;
        }

    }

碰撞检测

使用排除法

拖拽改变层大小

滚动条的模拟和扩展运用

鼠标滚轮

//在chrome与ie中，事件是 onmousewheel
//FF不执行，会当作添加的一个自定义属性。

    oDiv.onmousewheel = function(){
        alert('hello');
    };
    oDiv.addEventListener('DOMMouseScroll',function(){//FF必须使用时间的第二种绑定形式。第二种绑定形式有兼容性问题。绑定一个不存在的事件不会有问题
        alert('firefox');
    }，false);

//direction 
  //  chrome&&IE
alert(ev.wheelDelta);  //上+，下-
  // FF
        alert(ev.detail);//上-，下+；在其他浏览器上存在这个属性，显示值是为0

//和运算符优先级有关系
dec = ev.wheelDelta>0?true:false;

//阻止事件默认行为，阻止的是第一种绑定事件行为
return false;

//addEventListener 
ev.preventDefault();

//attachEvent 使用的还是return false;

cookie

/*
*
* cookie 存储数据 //可以长时间存放数据
*
* 变量只能在开启浏览器中存在
*
*   1.不同浏览器 存放cookie位置不一样，不能够通用
*   2.cookie的存储是以域名进行区分
*   3. cookie的数据可以设置名字
*   4.一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
*   5.每个cookie存放的内容大小存在限制，不同浏览器存放大小限制不同
* */

//一些浏览器不允许本地操作cookie


    //我们通过document.cookie来获取当前网站下的cookie的时候，得到的是字符串形式的值，它包含了当前网站下所有的cookie

    // 如果想长时间存放一个cookie，需要在设置cookie的时候，设置过期时间，时间过期，会自动销毁。cookie默认是临时存储。关闭浏览器进程，自动销毁。

    //过期后面跟上的是时间，时间必须得是日期对象字符串形式[字符串格式的时间]



    var oDate = new Date();
    oDate.setDate(oDate.getDate()+5);//设置一个月的某一天

    console.log(oDate);
console.log( typeof oDate.toGMTString());//提供的一个方法,可以修改为字符串

    document.cookie = 'username=leo;expires ='+oDate.toGMTString();//往访问者电脑里存储一个cookie 'name=value;'
    document.cookie = 'age=32';
    //chrome不允许本地形式操作cookie

    //读取
    alert(document.cookie);//username=leo; age=32

//存储特殊字符的时候，会出现一些问题。内容最好编码存放 encodeURI

//如果存储中文，会出现日期不正确的行为， 所以最好先编码。。
    console.log(encodeURI('你好'));//出现%什么什么
    console.log(decodeURI('%E4%BD%A0%E5%A5%BD'));//解码

    //如何获取想要的？


    function setCookie(key,value,t){

        var oDate = new Date();
        oDate.setDate(oDate.getDate()+t);
        document.cookie = key+'='+encodeURI(value)+';expires='+oDate.toGMTString();
    }

    function getCookie(key){
        var arr1 = document.cookie.split(';');

        for(var i =0;i