BOM相关知识|青训营笔记

123 阅读2分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 17 天。今天我们开始谈谈BOM相关知识,请大家多多指教!

【BOM概要】

  • BOM提供独立于内容且可以与浏览器窗口进行交互的对象,其核心对象是Window
  • Window下又提供了很多对象,这些对象用于访问浏览器,被称为浏览器对象
  • Window各内置对象之间按照某种层次关系组织起来的模型统称为浏览器对象模型
  • BOM包含了DOM
  • BOM的核心对象是Window,
  • 其他的对象称为Window的子对象,子对象是以属性的方式添加到Window对象中的

Window对象是浏览器顶级对象,具有双重属性,既是JavaScript访问浏览器窗口的一个借口,又是一个全局对象,定义在全局作用域中的变量、函数都是Window对象的属性和方法

【两个常用事件】

Windows提供了很多事件,下面介绍两个比较常用的事件

window.onload加载事件

  • 在网页开发中可以通过Window对象调用onload实现窗口(页面)加载事件,当文档内容包括图像、脚本文件、CSS文件等)完全加载时会触发该事件,并调用该事件对应的事件处理函数

  • JavaScript代码是从上到下依次执行的,如果在页面加载完成后执行某些代码,并把这些代码写到页面任意地方,可以把这部分代码写到window.onload事件处理函数中

  • onload页面加载事件有两种处理方式:

//方式1
window.onload=function(){};
//方式2
window.addEventLintener('load',function(){});

注意:
window.onload注册事件的方式只能写一次,如有多个则以最后一个为准
window.addEventLintener注册事件不受注册次数限制

document.DOMContentLoaded加载事件

  • document.DOMContentLoaded加载事件会在DOM加载完成时触发
  • 执行速度更快,适用于页面中图片很多的情况
  • document.DOMContentLoaded加载事件有兼容性问题,需要浏览器是IE9以上版本

【小结】

今天总结了BOM相关知识,了解了window.onload加载事件和document.DOMContentLoaded加载事件。