BOM 及窗口加载事件

简介: BOM 及窗口加载事件

BOM 是学习完 DOM 文档对象模型后的另一个对象模型 --------- 浏览器对象模型,它提供了一系列独立于内容而与浏览器窗口进行交互的对象,并且每个对象都有很多方法和属性,核心对象及顶级对象是 window 再来回顾一下 DOM 和 BOM 的区别:


DOM:

  • 文档对象模型
  • 顶级对象为 document
  • 主要学习内容为操作页面元素
  • 标准为 W3C 标准规范


BOM:

  • 浏览器对象模型
  • 顶级对象为 window
  • 主要学习的是浏览器窗口的交互
  • BOM 是浏览器厂商在各自浏览器设定的,兼容性很差


我们要清楚了解:BOM 比 DOM 要大,DOM 是包含在 BOM 里面的


window 对象是浏览器的顶级对象,它既是 JS 访问浏览器的一个接口,也是一个全局对象,定义在全局作用域中的变量和函数都会变成它的一个方法:但是在调用的时候我们通常会省 window,直接 console.log(a)即可,就比如我是河南人,我给别人说我的省份时不用再说我是中国河南人,一个道理

<script>vara=100;
console.log(window.a);
</script>

窗口加载事件

在之前没有学习 BOM 时,我们书写 HTML 和 Script 的顺序是先写完 HTML 再写 Script,目的是先让 HTML加载完,才能执行后面的交互效果,但是学习了 BOM 后,我们就可以实现 Script 标签随意放啦


window.addEventListener('load',function(}) :

这个方法可以使文档内容全部加载完后再执行 JS 的内容,包括了图片,flash,css,脚本文件等等,(如果使用的 window.οnlοad=function(){} 的话那么相同的元素只能被注册一次,并且以最后一次为准,使用该侦听函数注册事件则可以注册多次),Script 标签可以放在 HTML 的前面,也可以放在 head 里面,或者是放在外部,以下便是使用该方法后将 Script 标签放在了 HTML 标签的上部

<script>window.addEventListener('load',function(){
varele=document.querySelector('button');
ele.addEventListener('click',function(){
alert('我弹出啦');
          })
    })
</script><button>按钮</button>


document.addEventListener('DOMContentLoaded',function(}) :

该方法与上面的区别在于,这个事件仅当 DOM 加载完成就可以去执行 JS 的交互内容了,不包括图片,css,flash,脚本文件等等,如果一个页面图片很多,使用 onload 事件将会耗费大量时间,那么使用这个事件去注册将会大大减少用户等待页面的时间

<script>window.addEventListener('DOMContentLoaded',function(){
varele=document.querySelector('button');
ele.addEventListener('click',function(){
alert('我弹出啦');
          })
    })
</script><button>按钮</button>
相关文章
|
9月前
|
iOS开发 MacOS
LabVIEW如何使用热键去触发自定义的事件
LabVIEW如何使用热键去触发自定义的事件
181 1
|
8月前
|
开发工具 git
大事件项目42---怎么区分,发布还是草稿,下拉菜单的触发时机
大事件项目42---怎么区分,发布还是草稿,下拉菜单的触发时机
|
8月前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM(浏览器对象模型),它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例,如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
63 5
|
8月前
|
前端开发
自定义QT QWidget对象响应弹出菜单的解决方法
自定义QT QWidget对象响应弹出菜单的解决方法
126 1
|
JavaScript
BOM中window对象的方法之弹窗
BOM中window对象的方法之弹窗 之前介绍了window对象的属性,接下来说一说window对象的方法。当然方法有好些,这里主要讲一下window对象的弹窗方法。 // alert() 显示带有一段消息和一个确认按钮的警告框。 window.alert(&quot;这是是一个警告框&quot;); // confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 返回值 true false var sure=window.confirm(&quot;确认要离开吗?&quot;); console.log(sure); // prompt(&quot;提示文本&quot;
|
JavaScript Windows
简单解析BOM中Screen对象
简单解析BOM中Screen对象 Screen 对象包含有关客户端显示屏幕的信息。 console.log(screen); // 属性 // availHeight 返回屏幕的高度(不包括Windows任务栏) // availWidth 返回屏幕的宽度(不包括Windows任务栏) console.log(screen.availHeight,screen.availWidth); // height 返回屏幕的总高度 // width 返回屏幕的总宽度 console.log(screen.height,scree
|
JavaScript 前端开发 内存技术
JavaScrip BOM 窗口加载事件
JavaScrip BOM 窗口加载事件
113 0
|
程序员
错误:“ResourceDictionary”根元素需要 x:Class 特性来支持 XAML 文件中的事件处理程序。请移除 MouseLeftButtonDown 事件的事件处理程序.
原文:错误:“ResourceDictionary”根元素需要 x:Class 特性来支持 XAML 文件中的事件处理程序。请移除 MouseLeftButtonDown 事件的事件处理程序. 转载于(https://social.
2444 0

热门文章

最新文章