bom event周期_前端知识点总结——BOM
前端知识点总结——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 ?查询字符串
方法:
在当前窗口打开,可后退:
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中绑定:
绑定:
当事件发生时: 自动执行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组:
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的增量)
bom event周期_前端知识点总结——BOM相关推荐
- bom event周期_MRP运行五大步骤逻辑详解(含动态安全库存、安全时间、批量计算方法、BOM表扩展方法的详细说明)...
MRP运行五大步骤逻辑详解(含动态安全库存.安全时间.批量计算方法.BOM表扩展方法的详细说明) 作者:袁云飞(AlbertYuan)- 微信号yuanalbert 以下内容均为原创,希望对初学者有一 ...
- web前端知识点太多_前端知识点总结——框架中报错集锦(含解决方法)
前端知识点总结--框架中报错集锦(含解决方法) 1.vue 1.指定template直接返回多个标签 Component template should contain exactly one roo ...
- bom event周期_DOM-BOM-EVENT(1)
1.DOM简介 DOM(Document Object Model)即文档对象模型,是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使得从程序中对该结构进行访问,从 ...
- bom event周期_BOM-event事件
添加事件监听 shoot 获得跟踪导弹 失去跟踪导弹 btnShoot.addEventListener("click",function(){//添加事件监听 console.l ...
- 前端学习之BOM(浏览器对象模型)
目录 1. BOM概述 1.1 定义 1.2 BOM构成 2. window 对象常见事件 2.1 窗口加载事件 2.2 调整窗口大小事件 3. 定时器 3.1 定时器 3.2 setTimeout( ...
- 「划线高亮」和「插入笔记」—— 不止是前端知识点
如今前端领域:serverless,low code,全栈化等概念遍布漫天.开发者们热衷于讨论「如何把前端格局做大」,「如何将高高在上的概念落地」.此时,你有没有感受到「还不知道发展方向到底是什么,就 ...
- 前端知识点HTML+基础JS总结
前端知识点要概 1.基本类型和引用类型 基本类型:Number, String, Null, Undefined, Boolean, Symbol(ES6数据类型) 引用类型:Object.Array ...
- 前端知识点总结——JS高级(持续更新中)
前端知识点总结--JS高级(持续更新中) 1.字符串 什么是: 连续存储多个字符的字符数组 相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
- 前端知识点总结——H5
前端知识点总结--H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖动API (8)Web Wor ...
最新文章
- 关肇直 automation lingjunrenwu
- CentOS yum源
- 石墨烯可将硬盘容量提高十倍,剑桥在Nature子刊发表最新研究
- 正则表达式的汉字匹配
- springboot 配置双mysql数据库
- mvc:default-servlet-handler/作用
- java 父子级json组装不用递归_2020面试阿里Java研发岗题库总结,想虐面试官不能错过的面试宝典...
- 安卓mysql插入数据_【11-25求助】关于Android 的SQLite数据库插入数据报错问题
- 马云谈区块链:不可能也不应该用来一夜暴富
- 文本属性之装饰文本(CSS、HTML)
- 多linux服务器之间实现文件自动复制(脚本)
- 取本周日期 C# .net
- CFS三层靶机搭建及其内网渗透
- Win10 DirectShow
- 黑苹果10.13.6及以下安装WebDriver驱动nvidia独立显卡,以及修改机型
- Next.js中通过容联云通讯实现手机验证码收发
- 数仓工具—Hive实战之占比同比环比(10)
- Azure中配置网络安全组入站规则让外部网络访问VM中的网站
- vue面试题(自用)
- java集合(容器)
热门文章
- PIC单片机精通_串口通信模块C实现
- 【转】反病毒攻防研究第003篇:添加节区实现代码的植入
- 【CyberSecurityLearning 39】逻辑卷以及格式化挂载、特殊权限(非常重要)
- 转移地址在内存中的jmp指令 检测点9.1
- Build path entry is missing 导致项目不编译。
- 3D数学 向量和矩阵
- Java Arrays.asList()方法详解
- SpringBoot学习系列之一
- java中椭圆类_Java中的Graphics2D类基本使用的教程
- 【译】A quick list of new enterprise features in iOS 13, iPadOS, and macOS 10.15 Catalina