JavaScript是一门脚本语言,需要依赖运行环境。
其中非常重要的运行环境就是浏览器,而且浏览器本身又作为一个应用程序需要对其本身进行操作,所以通常浏览器会有对应的对象模型(BOM)。
我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁/接口。
DOM为JavaScript脚本与html文档的桥梁/接口。
什么是BOM?
BOM(Browser Object Model)即浏览器对象模型,用于与浏览器窗口进行交互 核心对象为window,可用console.dir(window)查看window的属性和方法,BOM包含了DOM
BOM 主要包括以下的对象模型:
-
window:包括全局属性、方法,控制浏览器窗口相关的属性、方法;
-
location:浏览器连接到的对象的位置(URL);
-
history:操作浏览器的历史;
-
document:当前窗口操作文档的对象;
window对象在浏览器中有两个身份:
身份一:全局对象。我们知道ECMAScript其实是有一个全局对象的,这个全局对象在Node中是global;比如默认给我们提供了全局的函数和类:setTimeout、Math、Date、Object等;比如在全局通过var声明的变量,会被添加到GO中,也就是会被添加到window上;
身份二:浏览器窗口对象。作为浏览器窗口时,提供了对浏览器操作的相关的API
DOM和BOM的区别
window对象
页面加载事件 | |
---|---|
load | DOM全部加载完成 |
DOMContentLoaded | 仅当DOM加载完成,不包括样式表,图片,flash等,ie9以上支持 |
调整窗口 | |
resize | 窗口大小发生改变时(js实现响应式页面) |
定时器 | |
---|---|
setTimeout() 和 clearTimeOut() | 倒计时结束后,调用一次回调函数。 |
setInterval() 和 clearInterval() | 每隔一段时间,调用一次回调函数。 |
location对象
location是最有用的BOM对象之一,提供了当前窗口中加载文档的信息,以及通常得导航功能
属性 | |
---|---|
location.href | 返回完整的URL |
location.host | 返回域名 |
location.search | 返回一个URL的查询部分 |
方法 | |
location.assign() | 载入一个新的文档 |
location.reload() | 重新载入当前文档 |
location.replace() | 用新的文档替换当前文档 |
history对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。 History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问
属性 | |
---|---|
history.length | 返回历史列表中的网址数 |
方法 | |
history.forward() | 加载 history 列表中的前一个 URL |
history.back() | 加载 history 列表中的下一个 URL |
history.go() | 加载 history 列表中的某个具体页面 |
什么是DOM?
文档对象模型(Document Object Model, 简称DOM),是W3C组织规定的处理HTML的标准编程接口。 通过DOM API,用于操作html页面。
DOM 构架
常用DOM方法
主要包括:增、删、改、查、事件操作
增、删、改、查(思维导图)
事件操作
-
事件三要素
- 绑定元素
- 触发事件
- 响应函数
document.addEventListener(event, function[, useCapture])
参数 | 描述 |
---|---|
event(必选) | 字符串,描述事件名称 |
function(必选) | 函数,触发事件后执行的函数 |
useCapture(可选) | 布尔值,true捕获阶段执行,false冒泡阶段执行 |
- 常用事件总结
常见事件(鼠标) | 触发条件 |
---|---|
click | 单击 |
dblclick | 双击 |
mouseenter | 鼠标悬停在元素上,替代mouseover |
mouseleave | 鼠标离开元素,替代mouseout |
focus | 鼠标按键按下 |
blur | 鼠标按键抬起 |
常见事件(键盘) | 触发条件 |
---|---|
keydown | 键盘按键按下 |
keypress | 键盘按键按下,仅用于字符按键,不识别功能键 |
keyup | 键盘按键抬起 |
执行顺序:keydown → keypress → keyup
- DOM事件流
DOM事件流
:DOM事件发生的顺序,可以分为事件捕获阶段和事件冒泡阶段。
TIPS
- onclick和attchEvent只有冒泡
- document.addEventListener(event, function[, useCapture]) true为事件捕获,false/省略为事件冒泡
- 部分事件类型无冒泡(blur...)
事件委托(代理、委派)
:不给每个子元素单独设置事件监听,而是设置在其父元素上,利用冒泡原理间接设置到每个子节点,提升程序性能。
例子: 将多个子元素(li)的事件监听委托给父元素(ul),父元素利用event.target获取子元素,并通过子元素调用(call)
- 事件对象
在触发 DOM 上事件时,会产生一个事件对象 event,这个对象中包含着所有与该事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
ele.onclick = funciton(event) {}