BOM（一）概述、history对象、location对象、navigator对象、事件
BOM 全称 Browser Object Model，是专门操作浏览器窗口和软件的一套对象和方法的统称。要想操作浏览器窗口或获取浏览器软件的信息时就用 bom。
DOM 专门负责操作网页范围内的一切内容；BOM 专门负责操作网页范围以外，浏览器窗口或浏览器软件中的一切内容，包括 window, location, history, navigator, document, screen, event。
需要注意 BOM 无标准且存在严重的兼容性问题，所以了解即可。
目录
一、window对象3大角色
1. 代替 ES 标准中的 global 充当全局作用域对象
所有直接声明的全局变量和全局函数，都默认保存在 window 对象中。
2. 保存了所有"原生"的对象和方法
不需要去第三方下载就可直接使用对象和方法，比如：window.Array, window.document, window.alert...
3. 代表当前正在打开的这个浏览器窗口
（1）获得当前窗口的大小：
| 完整窗口大小 | 仅文档显示区内部大小 |
| window.outerWidth | window.innerWidth |
| window.outerHeight | window.innerHeight |
（2）打开和关闭窗口
| 打开 | 关闭 |
| window.open() | window.close() |
二、打开新链接的几种情况
1. 在当前窗口打开，可后退
window.open("url", "_self")
//相当于HTML中
<a href="url" target="_self">
2. 在当前窗口打开，禁止后退
location.replace("新url")3. 在新窗口打开，可同时打开多个
window.open("url", "_blank");
//相当于HTML中
<a href="url" target="_blank">
4. 在新窗口打开，只能打开一个
window.open("url", "自定义窗口名");
//相当于HTML中
<a href="url" target="自定义窗口名">
注意相同名称的窗口只能打开一个，如果打开第二个同名窗口，则新同名窗口会覆盖旧同名窗口。
举例：演示打开链接的四种情况；
<body>
<h3>1. 在当前窗口打开，可后退</h3>
<a href="www.baidu.com" target="_self">go to baidu</a><br>
<button onclick="open1()">go to baidu</button>
<script>
function open1() {
window.open("www.baidu.com", "_self");
}
</script>
<h3>2. 在当前窗口打开，禁止后退</h3>
<button onclick="open2()">go to baidu</button>
<script>
function open2() {
location.replace("www.baidu.com");
}
</script>
<h3>3. 在新窗口打开，可打开多个！</h3>
<a href="www.baidu.com" target="_blank">go to baidu</a><br>
<button onclick="open3()">go to tmooc</button>
<script>
function open3() {
window.open("www.baidu.com", "_blank");
}
</script>
<h3>4. 在新窗口打开，只能打开一个</h3>
<a href="www.baidu.com" target="tmooc">go to baidu</a><br>
<button onclick="open4()">go to baidu</button>
<script>
function open4() {
window.open("www.baidu.com", "tmooc");
}
</script>
</body>三、history对象
history 是内存中专门保存当前窗口打开后成功访问过得所有 url 的历史记录数组，history 数组不可做任何修改操作，功能有前进、后退和刷新。
| 前进一步 | history.go(1) |
| 后退一步 | history.go(-1) |
| 刷新 | history.go(0) |
举例：使用程序实现前进、回退；
<body>
<div>
<a href="1history.html">1</a>
<a href="2history.html">2</a>
<a href="3history.html">3</a>
</div><br />
<div>
<a href="javascript: history.go(-1)">后退一次</a>
<a href="javascript: history.go(1)">前进一次</a>
</div>
</body>四、location对象
专门保存浏览器地址栏中正在打开的一个 url 的信息的对象。可以分段获得 url 中各个部分的信息：
| location.href | 获得完整的url |
| location.protocol | 获得url中协议部分 |
| location.host | 获得url中主机名+端口号 |
| location.hostname | 获得主机名 |
| location.port | 端口号 |
| location.pathname | 可获得从主机名后的/往后的相对路径 |
| location.search | 可获得从?往后的查询字符串参数 |
| location.hash | 可获得从#往后的锚点地址 |
五、navigator对象
专门保存浏览器配置信息的对象。常用属性如下：
| navigator.userAgent | 获取浏览器的名称、内核、版本号 |
| navigator.plugins | 获取浏览器中安装的所有创建信息的列表 |
| navigator.plugins["完整插件名"]!==undefined | 说明已安装 |
举例：检查浏览器是否安装 PDF 和 Flash 插件；
<body>
<h3 id="msg1"></h3>
<h3 id="msg2"></h3>
<script>
console.log(navigator.userAgent);
console.log(navigator.plugins);
var msg1 = document.getElementById("msg1");
var msg2 = document.getElementById("msg2");
//判断浏览器是否安装了Chrome PDF Viewer
if (navigator.plugins["Chrome PDF Viewer"] !== undefined) {
msg1.innerHTML = "已安装PDF插件，可正常浏览PDF电子书";
} else {
msg1.innerHTML = `未安装PDF插件，<a href="#">点此下载</a>安装`;
}
//判断浏览器是否安装了Shockwave Flash
if (navigator.plugins["Shockwave Flash"] !== undefined) {
msg2.innerHTML = "已安装Flash插件，可正常播放Flash视频";
} else {
msg2.innerHTML = `未安装Flash插件，<a href="#">点此下载</a>安装`;
}
</script>六、事件
事件是浏览器自动触发的或用户手动触发的页面中内容或状态的改变；当事件发生时，我们希望自动调用执行的函数为事件处理函数。
1. 事件绑定
（1）在HTML中手工绑定
<元素 on事件名="事件处理函数()">
<script>
function 事件处理函数(){ ... }
</script>
（2）在 js 中以赋值方式绑定
元素对象.on事件名=function(){ this }（3）在 js 中以添加事件监听对象的方式绑定
//1.
查找触发事件的元素，添加事件监听对象
//2.
元素对象.addEventListener("事件名", 事件处理函数)
addEventListener 可以新建一个事件监听对象，其中保存了元素对象、事件名、事件处理函数；还自动将事件监听对象添加到事件监听对象队列中。
移除监听对象：
元素.removeEventListener("事件名", 原事件处理函数)举例：为发射按钮添加事件监听，可同时发射多种子弹，也可移除子弹；
<body>
<button id="btnShoot">shoot</button><br>
<button id="btnAward">获得跟踪导弹</button><br>
<button id="btnBreak">失去跟踪导弹</button><br>
<script>
var btnShoot = document.getElementById("btnShoot")
var btnAward = document.getElementById("btnAward")
var btnBreak = document.getElementById("btnBreak")
//开局，点shoot按钮，只能发射一种子弹
btnShoot.onclick = function () {
console.log(`发射一枚普通子弹`);
}
var shoot2 = function () {
console.log(`发射一枚跟踪导弹`);
}
//当单击获得跟踪导弹按钮后，为btnShoot按钮再多添加一种跟踪导弹
btnAward.onclick = function () {
btnShoot.addEventListener(
"click",
shoot2
)
}
//当单击btnBreak按钮时，从btnShoot上移除跟踪导弹
btnBreak.onclick = function () {
btnShoot.removeEventListener(
"click",
shoot2
)
}
</script>
</body>2. 事件模型
点在内层元素上，也会触发外层元素的单击事件；全球的浏览器开发者一致认为，点在内层元素上，也相当于点在了外层元素上，所以有了事件模型。
事件模型的三个阶段：
（1）捕获：从树根节点开始，到当前触发事件的目标元素结束，由外向内依次遍历并记录各级父元素上是否绑定了事件处理函数，只记录，不执行。
（2）目标触发：总是优先触发实际点击的目标元素上的事件处理函数。
（3）冒泡：从目标元素开始，到树根节点结束，由内向外依次触发各级父元素上绑定的事件处理函数。
3. 事件对象
当事件发生时，浏览器自动创建的，保存事件相关信息的对象；事件对象总是作为事件处理函数的第一个实参值，自动传入。
（1）当事件发生时，浏览器会自动创建事件对象：
元素对象.on事件名=function(e){ ... }
元素对象.addEventListener("事件名",function(e){ ... })
（2）事件对象的功能：
a. 停止冒泡
e.stopPropagation()举例：点内层元素，也触发父元素上的事件处理函数；
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
<script>
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
var d1 = document.getElementById("d1");
//给每层div都绑定单击事件，可以喊疼
d1.onclick = function () {
console.log("d1");
}
d2.onclick = function (e) {
e.stopPropagation(); //停止冒泡
console.log("d2");
}
d3.onclick = function (e) {
e.stopPropagation();
console.log("d3");
}
</script>
</body>b. 利用冒泡/事件委托
浏览器触发事件采用的是遍历事件监听对象队列形式查找事件监听对象，如果添加的事件监听对象越多遍历时间就越长，事件响应的速度越慢；所以应该尽量减少事件绑定的次数。但功能不能少。
举例：使用事件委托实现计算器效果；
//计算器
<body>
<div id="keys">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button><br>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button><br>
<button>C</button>
<button>+</button>
<button>-</button>
<button>=</button>
</div>
<textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
<script>
//DOM4步
//1. 查找触发事件的元素
var div = document.getElementById("keys");
//2. 绑定事件处理函数
div.onclick = function (e) {
if (e.target.nodeName === "BUTTON") {
//先获得充当显示屏的id为sc的文本域元素
var sc = document.getElementById("sc");
// 判断当前点击的按钮的内容
switch (e.target.innerHTML) {
// 如果点击“C”，清空显示屏的内容
case "C":
sc.value = "";
break;
// 如果点击“=”，获得显示屏中的表达式，计算结果
case "=":
var str = sc.value;
// 尝试计算显示屏中的内容
try {
//将显示屏的内容交给eval做计算，将结果再替换回显示屏中
sc.value = eval(str)
} catch (err) {
sc.value = err;
}
break;
// 如果点击了其他的按钮，就将按钮内容追加到显示屏上
default:
sc.value += e.target.innerHTML;
}
}
}
</script>c. 阻止默认行为，有两种方式：
//1.
<a href="javascript:;">文本</a>此方法只对a元素有效，意思是不让a跳转到其它页面，而是在当前页面的内容中执行一条js语句。; 意为是一条什么也不做的空语句；javascript:; 表示执行一条空语句。
//2.
e.preventDefault()此方法对任意元素有效。
举例：点a，返回页面顶部，并阻止a修改地址栏中url；
<body style="height:2000px">
<!--希望:点a可返回顶部，但是不要在地址栏结尾加#top-->
<a id="a1" href="#top">返回顶部</a>
<script>
var a1 = document.getElementById("a1");
a1.onclick = function (e) {
//阻止默认行为
e.preventDefault();
//让窗口滚动到顶部0位置
window.scrollTo(0, 0)
}
</script>d. 获取鼠标位置
| 鼠标相对于屏幕左侧、上方的距离 | e.screenX e.screenY |
| 鼠标相对于浏览器内部文档显示区左侧、上方的距离 | e.clientX e.clientY |
| 鼠标相对于当前点击的HTML元素左侧、上方的距离 | e.offsetX e.offsetY |
举例：点击图片，获得鼠标三组坐标位置；
<body>
<div id="pop"></div>
<script>
var pop = document.getElementById("pop");
//点div，输出三组鼠标位置
pop.onclick = function (e) {
//鼠标相对于屏幕左侧、上方的距离
console.log(e.screenX, e.screenY);
//鼠标相对于浏览器内部文档显示区左侧、上方的距离
console.log(e.clientX, e.clientY);
//鼠标相对于当前点击的HTML元素左侧、上方的距离
console.log(e.offsetX, e.offsetY);
}
</script>
</body>JavaScript DOM BOM 终。
相关文章
- js 事件循环中宏任务和微任务执行顺序
- 【愚公系列】2022年10月 微信小程序-优购电商项目-⼩程序事件的绑定
- JavaScript事件对象
- 7.26VR行业大事件：苹果微透镜系统专利曝光；跳舞机游戏鼻祖科乐美公布AR舞蹈游戏专利
- 8.8VR行业大事件：Meta收紧外包岗位；卡马克：Meta在元宇宙上获得的回报率远低于预期
- MySQL大无语事件：一次生产环境的死锁事故，看看我怎么排查
- fabric方法、事件、对象
- 【IOC 控制反转】Android 事件依赖注入 ( 事件依赖注入具体的操作细节 | 创建 事件监听器 对应的 动态代理 | 动态代理的数据准备 | 创建调用处理程序 | 创建动态代理实例对象 )
- 【EventBus】事件通信框架 ( 实现几个关键的封装类 | 消息中心 | 订阅注解 | 订阅方法封装 | 订阅对象-方法封装 | 线程模式 )
- 【EventBus】事件通信框架 ( 取消注册 | 获取事件参数类型 | 根据事件类型获取订阅者 | 移除相关订阅者 )
- Oracle 等待事件 gc cr block 2-way 官方解释，作用，如何使用及优化方法
- Oracle 等待事件 library cache lock 官方解释，作用，如何使用及优化方法
- Oracle 等待事件 log file switch completion 官方解释，作用，如何使用及优化方法
- JQuery添加事件监听详解编程语言
- 可口可乐CFO谈“C罗移走可乐事件”：未影响销量
- 评阿里女员工事件：价值观，YYDS？
- Mysql中的事件完全解析（mysql中事件包括）
- 软件公司Palantir购买金条以对冲“黑天鹅事件” 客户也能以黄金付款
- js活用事件触发对象动作
- javascript兼容鼠标滚轮事件
- JavaScript获取事件对象的注意点
- javascript事件对象坐标事件说明
- JavaScript高级程序设计事件学习笔记
- js中事件的处理与浏览器对象示例介绍
- js的touch事件的实际引用
- asp.net页面触发事件panel滚动条高度不变的实现方法
- html的DOM中Event对象onabort事件用法实例