BOM浏览器对象模型，动画函数封装、DOM补充

BOM浏览器对象模型

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

window对象是浏览器的顶级对象

1、它是JS访问浏览器窗口的一个接口

2、它是一个全局对象、定义在全局作用域中的变量、函数都会自动变成window对象的属性和方法。

 

窗口加载事件

window.onload、window.addEventListener（慢一点）

当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

window.onload = function() {}
​
window.addEventListener('load', function() {}

DOMContentLoaded （快）

事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

window.addEventListener('DOMContentloaded', function() {}

调整窗口大小

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

window.addEventListener('resize', function() {}

window.innerWidth 获取屏幕尺寸

定时器（重中之重）

setTimeout（）；

window.setTimeout(调用函数，延迟时间);

                第一种 
        setTimeout(function(){
                    alert(11)
                },2000)
                第二种
         function callBack() {
            alert(22)
        }
        var times = setTimeout(callBack,1000);

注意：

1、window可以省略

2、调用函数可以直接写函数，或者写函数名或者采取字符串 '函数名()'三种形式。第三种不推荐

3、延迟的毫秒数省略默认是0，如果写的话，单位必须是毫秒数。

4、因为同一页面内定时器可能很多，所以我们经常给定时器赋值一个标识符。

setTimeout里面的函数又被称为回调函数

停止定时器

window.chearTimeout(timeoutID)

该方法取消了先前通过调用setTimeout（）建立的定时器

定时器之setInterval

window.setInterval(调用函数，延时时间)

setTimeout和setInterval的区别

1、 setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器

2、 setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

清除定时器之setInterval

window.clearInterval(intervalID)

经典案例 倒计时案例

        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }

this指向问题

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

2、方法调用中谁调用this指向谁

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

同步和异步

JS是单线程

概念：同一时间只能处理一件事情。

同步任务和异步任务

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

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

异步任务：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

JS的异步是通过回调函数实现的

异步任务分为以下三个类型：

1、普通事件：click、resize等

2、资源加载：load、error等

3、定时器：setInterval、setTimeout

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

JS执行机制（事件循环）

1、先执行执行栈中的同步任务

2、异步任务（回调函数）放入任务队列中

3、一旦执行栈的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以着这种机制被称为事件循环

location对象

获取和设置窗体的URL，并可以解析URL（网址）

location.href 获取设置整个URL

location.search 返回参数

substr(开始位置，截取长度) 截取字符串 ， split('分隔符') 字符串转换为数组

 

history对象

history对象在开发中比较少用，会在OA办公室中见到

元素偏移量 offset系列

offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有定位父元素的位置（若父元素没有定位，则以body为准）

2. 获得元素自身的大小（宽度高度）

3. 注意：返回的数值都不带单位

4. tarnsform：tarnslate（）不会计入offset 的测量值

offset 与 style 区别

offset 

• offset 可以得到任意样式表中的样式值

• offset 系列获得的数值是没有单位的

• offsetWidth 包含padding+border+width

• offsetWidth 等属性是只读属性，只能获取不能赋值

• 所以，我们想要获取元素大小位置，用offset更合适

style

• style 只能得到行内样式表中的样式值

• style.width 获得的是带有单位的字符串

• style.width 获得不包含padding和border 的值

• style.width 是可读写属性，可以获取也可以赋值

• 所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

鼠标按下：mousedown 鼠标弹起： mouseup 鼠标移动：mousemove

client系列

通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

 

立即执行函数：

 (function(){})()    或者   (function(){}())

主要作用： 创建一个独立的作用域。 避免了命名冲突问题

scroll系列属性

我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

 

三大系列总结

 

他们主要用法：

1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop

2.client经常用于获取元素大小  clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  

4.注意页面滚动的距离通过 window.pageXOffset  获得

mouseenter 和mouseover的区别

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发

原因：mouseenter不会冒泡

跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡

动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置。

实现步骤：

1. 获得盒子当前位置

2. 让盒子在当前位置加上1个移动距离

3. 利用定时器不断重复这个操作

4. 加一个结束定时器的条件

5. 注意此元素需要添加定位，才能使用element.style.left

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。

2. 核心算法： (目标值 - 现在的位置)   /  10    做为每次移动的距离步长

3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器 

4. 注意步长值需要取整  

   当我们点击按钮时候，判断步长是正值还是负值

1.如果是正值，则步长往大了取整 Math.ceil()

2.如果是负值，则步长 向小了取整 Math.floor()

缓动动画函数封装

function animate(obj, target, callback) {  

    clearInterval(obj.timer);

    obj.timer = setInterval(function() {

        var step = (target - obj.offsetLeft) / 10;

        step = step > 0 ? Math.ceil(step) : Math.floor(step);

        if (obj.offsetLeft == target) {

            callback && callback();

        }

        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);

}

动函数添加回调函数

回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。

回调函数写的位置：定时器结束的位置。

DOM补充：

常用的键盘事件

 

执行顺序：keydown - keypress - keyup

keyCode 返回按下键的Ascll码值

document.addEventListener('keyup',function(e){
            console.log(e.keyCode);
        })

keyup和keydown事件的Ascll码不区分字母大小写，keypress区分字母大小写。

keyup在按键结束时才会显示在文本框，而keypress和keydown在按键按下时就已经显示在文本框内。