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 ? 查询字符串
方法:
在当前窗口打开, 可后退:
location.assign(url) => location.href=url => location=url
在当前窗口打开, 禁止后退:
location.replace(url)
重新加载页面: 刷新: 2 种:
普通刷新:
优先从浏览器本地缓冲获取资源:
- F5
- history.go(0)
- location.reload(/false/)
强制刷新:
无论本地是否有缓存, 总是强制从服务器获取资源
location.reload(true)
5. 定时器: 2 种:
周期性定时器:
什么是: 让程序每隔指定的时间间隔, 反复执行一项任务
何时: 只要让程序按照指定的时间间隔, 自动执行一项任务
如何: 3 件事:
1. 任务函数: 让定时器反复执行的任务
2. 启动定时器: timer=setInterval(task, interval)
让程序, 每隔 interval 毫秒自动执行一次 task 任务
3. 停止定时器: clearInterval(timer)
timer: 定时器的序号, 在内存中唯一标识定时器的整数
专门用于停止定时器
如何获得: 只能在启动定时器时获得
何时: 只要一个定时器可能被停止, 就要在启动时, 先保存定时器序号
好的习惯: 在 clearInterval 之后, 手动清除 timer 中残留的序号: timer=null;
停止定时器: 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 种:
在 html 中绑定:
绑定: <ANY on 事件名 ="js 语句">
当事件发生时: 自动执行 js 语句
问题: 不符合内容与行为分离的原则, 不便于维护和重用
但是: 在组件开发中, 反而要求内容, 行为和样式集中定义在一个小组件内, 自成体系
在 js 中绑定, 每个事件只能绑定一个处理函数:
ANY.on 事件名 = function(){ ... }
当事件发生时: ANY.on 事件名 () //this->ANY
问题: 用赋值方式绑定事件处理函数
在 js 中绑定, 每个事件可绑定多个处理函数:
ANY.addEventListener('事件名',handler)
在浏览器中为 ANY 元素的指定事件, 添加一个事件监听对象将事件监听对象加入到浏览器的监听队列中
触发事件时: 浏览器会遍历监听队列中的每个监听对象, 找到触发事件元素上对应事件的监听对象, 调用其处理函数
移除事件监听:
ANY.removeEventListener('事件名',handler)
说明: handler 必须是绑定时使用的原函数对象
强调: 如果一个处理函数, 有可能被移除, 则不能使用匿名函数绑定应使用有名的函数绑定
9.DOM 事件模型:
什么是: 从事件触发到处理函数执行, 所经过的过程 3 个阶段:
捕获 capture: 由外向内, 记录各级父元素上绑定的事件处理函数仅记录, 不触发!
目标触发: 优先触发实际点击的元素上绑定的处理函数
冒泡执行: 由内向外, 按捕获阶段记录的处理函数的倒序, 依次执行父元素上的处理函数
10. 事件对象:
什么是: 当事件发生时, 自动创建的, 封装事件信息的对象
何时: 只要希望获得事件信息, 或修改事件的默认行为时
如何获取: 事件对象默认总是以处理函数第一个参数, 自动传入
如何使用:
取消冒泡: e.stopPropagation()
利用冒泡:
优化: 尽量减少事件监听的个数
为什么: 浏览器查找事件监听, 采用的是遍历的方式
事件监听多, 浏览器查找就慢
何时: 如果对多个子元素绑定相同事件时, 都要利用冒泡
如何: 只要在父元素绑定一次, 所有子元素共用即可!
2 个难题:
1. 获得目标元素:
目标元素: 最初实际触发事件的当前元素
如何获得:
错误: this-> 父元素
正确: e.target
2. 筛选目标元素:
比如: 通过 nodeName, class, 内容
阻止默认行为:
何时: 只要事件的默认行为不是想要的
如何: e.preventDefault();
何时:
用 a 当按钮时, a 会自动向地址栏中添加 #锚点地址
提交表单时, 如果验证没通过, 可阻止提交
自定义表单提交:
input button + onclick + form.submit
input submit + form.onsubmit 事件 + e.preventDefault()
HTML5 中拖拽 API: 首先要阻止浏览器默认的拖拽行为
11. 鼠标坐标: 3 组:
相对于屏幕左上角: e.screenX, e.screenY
相对于文档显示区左上角: e.clientX, e.clientY
相对于当前元素左上角: e.offsetX, e.offsetY
12. 页面滚动:
事件: window.onscroll 获得页面滚动过的高度: body 顶部超出文档显示区顶部的距离
- scrollTop=document.documentElement.scrollTop
- ||document.body.scrollTop;
滚动 API:
window.scrollTo(left, top)
window.scrollBy(left 的增量, top 的增量)
来源: https://juejin.im/entry/5a978b3c5188257a7b5acdfd