JS基础学习小记（四）

BOM概述:

浏览器对象模型，其核心对象是window，浏览器的顶级对象，它是一个全局对象，调用的时候可以省略window。

window对象的常见事件：

• 窗口加载事件：

    //window.onload方法
    //先加载页面所有元素后，再加载此方法
    window.onload = function(){
        var btn = document.querySelector('button');
        btn.addEventListener('click',function () {
            alert('点击我');
        })
    }
//<button>监听</button>
    //onload一个页面只能有一次，否则会覆盖。

 //监听器事件，没有限制，可复用多个Listener
 window.addEventListener('click',function () {
        btn.addEventListener('click',function () {
            alert('点击我');
    })
        window.addEventListener('click',function () {
                alert('点击我');
        })
<button>监听</button>

//监听器 监听load 和 DOMContentLoaded

window.addEventListener('load',function () {
            alert(22);
        });

document.addEventListener('DOMContentLoaded',function () {
            alert('33');
        });
//load等页面全部加载完毕，包含页面dom元素 图片 flash等等
//DOMContentLoaded是DOM加载完毕，不包含 图片 flash 等等，加载速度比load快

• 调整窗口大小事件

      //现等页面加载完毕
        window.addEventListener('load',function () {
            var div = document.querySelector('div');
            //只要窗口大小发生像素变化，就会调用方法
            //经常利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度
            window.addEventListener('resize',function () {
                console.log(window.innerWidth);
                if (window.innerWidth<=800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
     </script>
   <div></div>

定时器：

//window.setTimeout(调用函数，[延迟的毫秒数]);
//window在调用时可以省略
//页面中可能有很多定时器，我们经常给定时器加标识符
    <script>
        var f1 = function() {console.log('时间到了');}
        var timeout1 = setTimeout(f1,2000);
        var timeout2 = setTimeout(f1,1000); //单位是毫秒，默认是0
    </script>

//停止定时器
<button>点击停止定时</button>
    <script>
        var btn = document.querySelector('button');
        var timeout = setTimeout(function () {
            console.log('baozha');
        },5000);
        btn.addEventListener('click',function () {
            clearTimeout(timeout);
        })
    </script>

// window.setInterval(回调函数,[间隔毫秒数]);
// 此方法是反复调用一个函数，每隔这个时间，调用一次这个函数
// setTimeout 延时时间到了，就调用一次，然后结束
    <script>
        setInterval(function () {
            console.log(23);
        },1000);
    </script>

//点击按钮，禁用disabled为true
手机号码：<input type="number"> <button>发送</button>
<script>
    var time = 3;//剩下的秒数
    var btn = document.querySelector('button');
    btn.addEventListener('click',function () {
        btn.disabled = true;
       var timer = setInterval(function () {
            if (time == 0) {
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
            }else {
            btn.innerHTML = '还剩下'+ time +'秒';
            time--;
            }
        },1000);
    })
</script>

1.全局作用域或普通函数中this指向全局对象window（定时器里面的this指向window）

2.方法调用中，谁调用this指向谁

3.构造函数中，this指向构造函数的实例

JS执行队列：

JS是单线程语言，添加和删除不能同时执行。这意味着所有的任务都需要排队，可能会造成页面渲染不连贯。

于是，JS中出现了同步和异步，开始允许多线程。

同步：按照排列顺序依次执行。

异步：在做一件事时，可以去做其他的事情，比如在烧水的同时，去切菜、炒菜。

同步任务都在主线程上执行，形成一个执行栈。

JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型：

1. 普通事件，如click resize等
2. 资源加载，如load error等
3. 定时器，包括setInterval setTimeout等

异步任务相关回调函数添加到任务队列中（也称消息队列）。

先执行同步任务，异步任务（回调函数）放到任务队列中，一旦执行栈中的同步任务执行完成，则去任务队列中找，找到把它放到执行栈中，再去执行。

主线程不断的重复获得任务、执行、再获取、再执行，这种机制叫事件循环（event loop）

Location对象：

用于获取或设置窗体的URL，并且可以用于解析URL。会返回一个location对象。

Navigator对象：

包含有关浏览器的相关信息，它有很多属性，我们最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

(agent:代理人)   下面前端代码可以判断用户用哪个终端打开页面，然后跳转。

History对象：

该对象与浏览器历史记录进行交互，包含用户（在浏览器窗口中）访问过的URL。