admin 管理员组文章数量: 1184232
课程名称 前端模块化
课程目标
1.了解常见浏览器 JS 对象常见 API 及用法
https://segmentfault/a/1190000014212576
2. 浏览器内置对象详解
3.浏览器事件模型详解
4. 浏览器请求相关内容详解
课程要点
一、什么是浏览器对象模型
BOM ：Browser Object Model（浏览器对象模型）,浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的 API
其主要对象有：
1. window 对象——BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的 Global 对象
2. location 对象：提供当前窗口中的加载的文档有关的信息和一些导航功能。既是 window 对象属 性，也是 document 的对象属性
3. navigation 对象：获取浏览器的系统信息 （用于测试是否浏览器断网）
window.navigator.onLine (用webSocket 或者 setInterval)
4. screen 对象：用来表示浏览器窗口外部的显示器的信息等
5. history 对象：保存用户上网的历史信息
二、Window 对象
Window 对象
windows 对象是整个浏览器对象模型的核心，其扮演着既是接口又是全局对象的角色
alert() confirm() prompt() open() onerror() setTimeout() setInterval()
阿里云有免费的日志服务，所有的error上传录入方便排查
- 窗口位置
screenLeft screenTop screenX screenY moveBy(x,y) moveTo(x,y)
- 窗口大小
innerWidth innerHeight outerWidth outerHeight resizeTo(width, height) resizeBy(width, height)
- 定时器
setTimeout
setInterval
（最好不要用它，因为切到后台h5是不运行的，返回时可能造成突然轮询请求好多次）
Location 对象
提供当前窗口中的加载的文档有关的信息和一些导航功能。既是 window 对象属性，也是 document 的对象属性
location 对象的主要属性：
hash （ 用window.location.hash 是#后面的值它可读可写 如http://domain/#admin的location.hash="#admin"）
window.addEventListener("hashchange", func, false);
host hostname
href （location.href）
location 的应用场景：Navigation 对象
navigation 接口表示用户代理的状态和标识，允许脚本查询它和注册自己进行一些活动
History 对象
history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起，history 对象是用窗口的浏览历史用文档和文档状态列表的形式表示。
go() back() forword() length
二、详解浏览器事件捕获，冒泡
浏览器事件模型中的过程主要分为三个阶段：捕获阶段、目标阶段、冒泡阶段。
这里要注意addEventListener的第三个参数, 如果为true，就是代表在捕获阶段执行。如果为false，就是在冒泡阶段进行
e.target.nodeName 指当前点击的元素, e.currentTarget.nodeName绑定监听事件的元素
阻止事件传播
stopPropagation() 阻止事件传播
大家经常听到的可能是阻止冒泡，实际上这个方法不只能阻止冒泡，还能阻止捕获阶段的传播。
stopImmediatePropagation()
如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。
阻止默认行为
e.preventDefault()
e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为
兼容性
attachEvent——兼容：IE7、IE8； 不支持第三个参数来控制在哪个阶段发生，默认是绑定在冒泡阶段
addEventListener——兼容：firefox、chrome、IE、safari、opera；
class BomEvent {
constructor(element) {
this.element = element;
}
addEvent(type, handler) {
if (this.element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
this.element.addEventListener(type, handler, false);
} else if (this.element.attachEvent) {
this.element.attachEvent('on' + type, function () {
handler.call(element);
});
} else {
this.element['on' + type] = handler;
}
}
removeEvent(type, handler) {
if (this.element.removeEnentListener) {
this.element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
this.element.detachEvent('on' + type, handler);
} else {
this.element['on' + type] = null;
}
}
}
// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
function stopPropagation(ev) {
if (ev.stopPropagation) {
ev.stopPropagation(); // 标准w3c
} else {
ev.cancelBubble = true; // IE
}
}
// 取消事件的默认行为
function preventDefault(event) {
if (event.preventDefault) {
event.preventDefault(); // 标准w3c
} else {
event.returnValue = false; // IE
}
}补充知识点
一个面试题ul + li，点击每个li alert对应的索引 先来给每个li绑定事件 写一个事件委托的方式
const liList = document.getElementsByTagName("li");
for(let i = 0; i<liList.length; i++){
liList[i].addEventListener('click', function(e){
alert(`内容为${e.target.innerHTML}, 索引为${i}`);
})
}
版权声明：本文标题：浏览器对象模型 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1768021658a3526920.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论