BOM browser objcet model.docx

浏览器对象模型（BOM，Browser Object Model）是JavaScript与浏览器交互的一种方式，它定义了浏览器窗口中的各种对象，包括文档、导航、历史记录等。学习BOM，实际上就是理解和操作`window`对象及其子对象。 在BOM中，`window`对象是最高级别的对象，几乎所有的全局变量和函数都是`window`对象的属性或方法。例如，`onclick`事件是传统的事件注册方式，只能在一个元素上注册一次。相比之下，`addEventListener`方法则支持多次注册同一个事件，具有更好的灵活性。`load`事件在页面所有资源（包括图片、脚本等）加载完毕后触发，而`DOMContentLoaded`事件则在DOM树构建完成时触发，这两个事件经常被用来做页面初始化操作。 定时器是BOM中常用的特性，`setTimeout`用于设置一次性延迟执行的函数，返回一个定时器ID，可以通过`clearTimeout`来取消。`setInterval`则是用来周期性执行函数，返回的定时器ID可以用`clearInterval`停止。JavaScript的执行机制涉及到同步和异步的概念，同步任务按顺序执行，而异步任务（如定时器、事件、Ajax）会被放入事件队列，等待主线程空闲时执行。 BOM还包含了一些内置对象和属性，比如： 1. `location`对象提供了与URL相关的功能，如`href`属性获取或设置URL，`search`获取查询字符串，`assign()`、`replace()`和`reload()`分别用于跳转、替换历史记录和刷新页面。 2. `history`对象管理浏览器的历史记录，`back()`、`forward()`和`go()`分别用于回退、前进和跳转到特定历史位置。 3. `navigator`对象提供了关于用户代理的信息，如`userAgent`属性可以判断客户端类型。 在元素的尺寸和位置方面，BOM有三个系列的属性： - `offset`系列：`offsetLeft`和`offsetTop`表示元素相对于最近的定位父元素的偏移，如果没有定位父元素，则相对于`body`；`offsetWidth`和`offsetHeight`获取元素总宽度和高度（包括边框和内填充）；`offsetParent`返回最近的定位父元素。 - `client`系列：`clientLeft`和`clientTop`获取元素左边框和上边框的宽度，`clientWidth`和`clientHeight`仅考虑内容区域的宽高。 - `scroll`系列：`scrollLeft`和`scrollTop`表示元素的水平和垂直滚动距离，`scrollWidth`和`scrollHeight`则表示内容的实际宽高。 BOM中的事件处理也非常重要，例如`click`事件用于响应点击，`focus`和`blur`处理焦点变化，`mouseover`和`mouseout`追踪鼠标进入和离开，`mousemove`响应鼠标移动，`mousedown`和`mouseup`跟踪鼠标按钮的按下和释放。`mouseenter`和`mouseleave`是不冒泡的鼠标事件，`input`监听输入框的值变化，`change`用于检测复选框、单选框的选中状态变化。此外，`transitionend`事件在CSS过渡动画结束时触发，用于配合动画效果。 总结来说，BOM是JavaScript与浏览器交互的基础，涵盖了许多关键概念，如事件处理、页面加载、定时器、元素尺寸和位置以及用户导航行为。熟练掌握BOM能帮助开发者更好地控制网页的行为和交互。