5.9 bom中的内置事件和方法

# 一、BOM

- js的三大组成部分
    - BOM（浏览器），DOM（页面），ECMAScript（语法）
    - 关系
        - ECMAScript（语法）规定，在 BOM（浏览器）中，如何操作 DOM（页面），做什么交互
## 1.什么是BOM
1. 概念
    - BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象）
    - 作用：
        - 提供了ES和页面的运行环境
        - 浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主
            - 浏览器的规范没有涉及到的范围，使用ES的规范
            - 宪法：ES，地方法规：浏览器的规定
            - 浏览器 > ES   ×
            - 兼容:
                - 不是兼容问题的兼容问题：
                    - alert(1);
                    - 功能一致，没有兼容
                    - 每个浏览器显示的样式都不一样
2. window的具体功能和作用
    - window：窗口
    - window提供的窗口 或 窗口与窗口之间的操作
    - 因为所有内容都运行在浏览器中，所以，window也是**浏览器的js**中的顶层（大boos）对象
        - 所有的全局变量和函数，都属于window
        - window在使用过程中可以省略
        - 注意，严格模式下，全局函数如果省略window，会导致全局函数中的this指向undefined
## 方法（内置全局函数）
1. 弹出框三兄弟
    - 弹出信息框：alert()
    - 弹出对话框：prompt()
    - 弹出选择框：confirm()
    - 注意原理，将来会使用html+css+js模拟
2. 页面的打开和关闭
    - open()
    - close()
    - 注意：
        - 尽量配合行为适用，不要直接执行
        - 而且某些浏览器还有兼容性
3. 计时器
    - 计时器（定时器）（重复执行）
        - 开
            - setInterval()
            - 功能：每隔参数2的时间，执行一次参数1的函数
            - 参数：参数1：函数；参数2：毫秒数
            - 返回值：当前计时器的唯一标志，是个数值，只有一个作用：用来清除当前计时器！！！
            - 是否改变原数据：否
            ```js
            var t = setInterval(function(){
                console.log("hello");
            }, 1000);
            ```
        - 关
            - clearInterval()
            - 功能：用来关闭计时器
            - 参数：要关闭的计时器的返回值 所在的变量！切记，变量！
            - 返回值：无
            - 是否改变：否
            ```js
            document.onclick = function(){
                clearInterval( t );
            };
            ```
    - 延时器（延迟，一次）
        - 开
            - setTimeout()
            - 功能：延迟 参数2的时间，执行一次参数1的函数
            - 参数：参数1：函数；参数2：毫秒数
            - 返回值：当前延时器的唯一标志，是个数值，只有一个作用：用来清除当前延时器！！！
            - 是否改变原数据：否
            ```js
            var t = setTimeout(function(){
                console.log("hello");
            }, 5000);
            ```
        - 关
            - clearTimeout()
            - 功能：用来关闭延时器
            - 参数：要关闭的延时器的返回值 所在的变量！切记，变量！
            - 返回值：无
            - 是否改变：否
            ```js
            document.onclick = function(){
                clearTimeout( t );
            };
            ```   

 

## 事件（内置全局事件）
- window浏览器事件
    - load：加载
        - window.onload不仅是页面的加载，还在等待资源的加载
        - document.onload仅仅是页面的加载
    - resize：改变大小
    - scroll：滚动
- 语法：
    - 事件源.on事件名 = 事件处理函数
    - 如：btn.onclick = function(){}
    - 如：window.onlaod = funciton(){}
    - 如：onlaod = funciton(){}

## 子对象（内置对象）
- history：历史记录
    - 控制浏览器的**前进后退刷新**等于历史记录相关的功能
    - 不方便在代码中临时测试，所以在浏览器打开其他页面测试
    - 属性：
        - 历史记录的个数：history.length
    - 方法：
        - 前进：history.forward()
        - 后退：history.back()
        - 前进或后退指定的步数：history.go(num);   num为正前进，为负后退，0刷新

- location：地址url
    - 控制浏览器的**地址栏的内容**
    - 不方便在代码中临时测试，所以在浏览器打开其他页面测试
    - 属性：
        - 既可以获取又可以设置：当前页面的地址，设置之后，页面会自动跳转
            - js实现跳转的方式：
            - location.href
        - 既可以获取也可以设置：当前页面地址中向后台发送的数据部分（?后的部分），页面也会跳转
            - location.search
        - 既可以获取也可以设置：当前页面地址的锚点连接（哈希值，#后的部分），页面也会跳转
            - location.hash
    - 方法：
        - 重新加载当前地址，意味着刷新了
            - location.reload()
        - 跳转方法，必须传参，空字符刷新，指定地址会跳转
            - location.assign("")

- navigator：浏览器信息（了解）
    - 以下测试是在Mac OS X 10_15_4系统的Chrome/81.0.4044.129浏览器进行的测试
    - navigator.userAgent：浏览器信息
        - "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36"
    - navigator.appName：浏览器名字（废弃）
        - "Netscape"
    - navigator.appVersion：浏览器版本
        - "5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36"
    - navigator.appCodeName：浏览器内核
        - "Mozilla"
    - navigator.platform：运行系统
        - "MacIntel"

- screen：屏幕尺寸（了解）
    - 显示器的分辨率
- frames：框架（了解）
    - 需要配合frame使用

- document：文档（DOM，重中之重点）

## 补充（...）
- 获取页面的可视（看得见的区域）区域的大小
    - document.documentElement.clientWidth
    - document.documentElement.clientHeight
    - 只能获取，不能设置

- 获取滚走的了距离
    - document.documentElement.scrollTop
    - document.documentElement.scrollLeft
    - 既能获取，又能设置