前端知识点总结——BOM

1.BOM: Browser Object Model

什么是: 特地操纵浏览器窗口的API
没有规范, 致使浏览器兼容性题目
包括:
window
history
location
navigator
dom
event
screen

2.window:

属性: .innerWidth, .innerHeight 浏览器窗口中，文档显现区的宽和高
要领: .open() .close() .open(“url”,”name”)

三种:

    1.在当前窗口翻开，可退却: .open("url","_self")
    2.在新窗口翻开，可翻开多个: .open("url","_blank")
    3.在新窗口翻开，只能翻开一个: 
      .open("url","自定义窗口名")

3.history: 保留当前窗口翻开后，胜利接见过的url的历史纪录栈

在当前窗口中，每接见一个新url，都会将新url压入history
API: history.go(n)

3种:

 行进: history.go(1)  
 退却: history.go(-1)  
 革新: history.go(0)

4.location: 保留当前窗口正在翻开的url的对象

属性:
.href 完全url地点
.protocol 协定
.host 主机名+端口号
.hostname 主机名
.port 端口号
.pathname 相对路径
.hash #锚点地点
.search ?查询字符串

要领:

1. 在当前窗口翻开，可退却:
   location.assign(url) => location.href=url => location=url
2. 在当前窗口翻开，制止退却:
   location.replace(url)

3. 从新加载页面: 革新: 2种:

   1. 一般革新:
      优先从浏览器当地缓冲猎取资本:
      F5
      history.go(0)
      location.reload(/false/)
   2. 强迫革新:
      不管当地是不是有缓存，老是强迫从服务器猎取资本
      location.reload(true)

5.定时器: 2种:

1. 周期性定时器:
   什么是: 让顺序每隔指定的时候间隔，重复实行一项使命
   什么时候: 只需让顺序根据指定的时候间隔，自动实行一项使命
   怎样: 3件事:
   1.使命函数: 让定时器重复实行的使命
   2.启动定时器: timer=setInterval(task, interval)

   让顺序，每隔interval 毫秒自动实行一次task使命

   3.住手定时器: clearInterval(timer)

   timer: 定时器的序号, 在内存中唯一标识定时器的整数
    特地用于住手定时器
    怎样取得: 只能在启动定时器时取得。
    什么时候: 只需一个定时器能够被住手，就要在启动时，先保留定时器序号
    好的习气: 在clearInterval以后，手动消灭timer中残留的序号: timer=null;

   住手定时器: 2种状况:

   1. 用户手动住手:
   2. 定时器可自动住手:
      在使命函数中，设定临界值，假如没有到达临界值，则继承实行使命，不然，假如到达临界值，就自动挪用clearInterval

2.一次性定时器:
什么是: 让顺序先守候一段时候，再实行一次使命。实行后，自动住手。
什么时候: 只需让顺序耽误实行一件事时
怎样: 3件事:
1.task
2.启动定时器: timer=setTimeout(task,wait)

 让顺序守候wait毫秒后，自动实行一次task，实行后自动住手

3.住手定时器: clearTimeout(timer)

6.定时器道理:

定时器中的使命函数，必需守候主顺序一切语句实行后，才实行。

7.navigator:

1.什么是: 保留浏览器设置信息的对象
包括:
.cookieEnabled: 推断当前浏览器是不是启用cookie

2.什么是cookie: 在客户端耐久存储用户私密数据的小文件
为何: 内存中一切数据都是暂时的! 顺序封闭，内存中一切变量都开释!
什么时候: 只需愿望在客户端耐久保留数据，都用cookie
.plugins: 包括浏览器一切插件信息的鸠合

3.什么是插件: 为浏览器增加新功能的小软件

怎样推断是不是装置指定插件: 

.userAgent: 保留浏览器称号和版本号的字符串
什么时候: 只需推断浏览器称号和版本号

8.event:

什么是事宜: 工资触发的，或浏览器自动触发的页面内容状况的转变。
什么是事宜处置惩罚函数: 当事宜发作时，自动实行的函数。
怎样绑定: 3种:

1. 在HTML中绑定:
   绑定: <ANY on事宜名=”js语句”>
   当事宜发作时: 自动实行js语句
   题目: 不符合内容与行动星散的准绳，不便于保护和重用
   然则: 在组件开辟中，反而请求内容，行动和款式集合定义在一个小组件内，自成体系。
2. 在js中绑定, 每一个事宜只能绑定一个处置惩罚函数:
   ANY.on事宜名=function(){ … }
   当事宜发作时: ANY.on事宜名() //this->ANY
   题目: 用赋值体式格局绑定事宜处置惩罚函数
3. 在js中绑定，每一个事宜可绑定多个处置惩罚函数:
   ANY.addEventListener(‘事宜名’,handler)
   在浏览器中为ANY元素的指定事宜，增加一个事宜监听对象。将事宜监听对象加入到浏览器的监听行列中。
   触发事宜时: 浏览器会遍历监听行列中的每一个监听对象，找到触发事宜元素上对应事宜的监听对象，挪用其处置惩罚函数
   移除事宜监听:
   ANY.removeEventListener(‘事宜名’,handler)
   申明: handler必需是绑定时运用的原函数对象
   强调: 假如一个处置惩罚函数，有能够被移除，则不能运用匿名函数绑定。应运用著名的函数绑定

9.DOM事宜模子:

什么是: 从事宜触发到处置惩罚函数实行，所经由的历程
3个阶段:

1. 捕捉capture: 由外向内，纪录各级父元素上绑定的事宜处置惩罚函数。——仅纪录，不触发!
2. 目的触发: 优先触发现实点击的元素上绑定的处置惩罚函数
3. 冒泡实行: 由内向外，按捕捉阶段纪录的处置惩罚函数的倒序，顺次实行父元素上的处置惩罚函数。

10.事宜对象:

什么是: 当事宜发作时，自动建立的，封装事宜信息的对象
什么时候: 只需愿望取得事宜信息，或修正事宜的默许行动时
怎样猎取: 事宜对象默许老是以处置惩罚函数第一个参数，自动传入
怎样运用:

1. 作废冒泡: e.stopPropagation()

2. 应用冒泡:
   优化: 只管削减事宜监听的个数
   为何: 浏览器查找事宜监听，采纳的是遍历的体式格局

        事宜监听多，浏览器查找就慢

   什么时候: 假如对多个子元素绑定雷同事宜时，都要应用冒泡
   怎样: 只需在父元素绑定一次，一切子元素共用即可!
   2个困难:

   1. 取得目的元素:
     目的元素: 最初现实触发事宜的当前元素
     怎样取得: 
      毛病: this->父元素
      准确: e.target
   2. 挑选目的元素:
     比方: 经由过程nodeName, class, 内容。。。

3. 阻挠默许行动:
   什么时候: 只需事宜的默许行动不是想要的
   怎样: e.preventDefault();
   什么时候:

   1. 用a当按钮时，a会自动向地点栏中增加#锚点地点。
   2. 提交表单时，假如考证没经由过程，可阻挠提交
      自定义表单提交:
      input button + onclick + form.submit
      input submit + form.onsubmit事宜 + e.preventDefault()
   3. HTML5中拖拽API: 首先要阻挠浏览器默许的拖拽行动

11.鼠标坐标: 3组:

1. 相对于屏幕左上角: e.screenX,  e.screenY
2. 相对于文档显现区左上角: e.clientX,  e.clientY
3. 相对于当前元素左上角:  e.offsetX,   e.offsetY

12.页面转动:

事宜: window.onscroll
取得页面转动过的高度: body顶部超越文档显现区顶部的间隔

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

转动API:
window.scrollTo(left, top)
window.scrollBy(left的增量,top的增量)