JavaScript之BOM(BOM构成、常用事件) |
您所在的位置:网站首页 › js中api是什么 › JavaScript之BOM(BOM构成、常用事件) |
BOM
一、BOM1、什么是BOM?2、BOM的构成
二、window对象的常用事件1、窗口加载事件2、调整窗口大小事件
一、BOM
1、什么是BOM?
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。 BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。 2、BOM的构成如下图所示: 截取部分如下所示: 我们知道在javascript的执行机制中,代码的执行是按照从上往下的顺序执行的,所以如果我们要给一个按钮添加点击事件,只能先设置按钮,然后获得按钮在进行操作,如下: 点击 var btn = document.querySelector('button'); btn.onclick = function(){ alert('您刚点击了一下!') }点击效果为: 如上例: window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您刚点击了一下!') } } 点击 这个时候也可以实现点击效果。 如果此时我们还有一个点击事件,想要将它的操作放到元素前面呢? 来操作试试: window.onload = function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又点击了一下!') } } window.onload = function(){ alert('你好') } 点击 打印结果如何呢? 代码为: document.addEventListener('DOMContentLoaded',function(){ var btn = document.querySelector('button'); btn.onclick = function(){ alert('您又点击了一下!') } alert('你好呀') }) 点击 运行结果为: 在很多网站上,我们会发现,当我们改变窗口大小时,里面的内容也会随之改变,这又是怎样做到的呢?这里就要用到我们的调整窗口大小事件。 其格式为: //(1) window.onresize = function(){} //(2) window.addEventListener("resize",function(){});window.onresize是调整窗口大小加载事件, 当触发时就调用的处理函数。 举个例子: 页面中有一个盒子,当我们的页面宽度小于800px时,让这个盒子的颜色变成紫色。 Document div { width: 100px; height: 100px; background-color: red; } div = document.querySelector('div') window.onresize = function(){ console.log(window.innerWidth); if(window.innerWidth |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |