JavaScript学习记录——BOM部分
BOM概述
BOM是浏览器对象模型,他提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window
缺乏标准,JavaScript的语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分
BOM的构成
BOM比DOM更大
- document.querySelector其实应该是windows.document.querySelector
- window对象是浏览器的顶级对象,具有双重角色
- 是js访问浏览器窗口的一个接口
- 是一个全局对象 定义在全局作用域中的变量和函数都会变成window对象的属性和方法 在调用的时候可以省略Window
- window对象是浏览器的顶级对象 具有双重角色
页面加载事件
<button>点击</button>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click',function() {
alert('点击我');
})
</script>
给button注册事件的时候必须要写在button后,并且写在script中
但是加了window.onload后则可以放在外面
<script>
window.onload = function () {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
}
</script>
<button>点击</button>
window.onload传统注册事件方式只能写一次 如果有多个 会以最后一个为准
<script>
window.addEventListener('load',function() {
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
alert('点击我');
})
})
</script>
<button>点击</button>
或者用window.addEventListener(推荐)写多少个都可以 不会冲突
窗口加载事件:document.addEventListener(‘DOMContentLoaded’,function() {} )
DOMContentLoaded事件触发的时候,仅当DOM加载完成,不包含样式表、图片、flash等 在页面图片较多的时候提高用户体验(加载快)
load等页面内容加载完毕,包含页面dom元素、图片、flash、css等才能执行
调整窗口大小事件
window.οnresize=function(){ }
window.addEventListener(“realize”,function(0 { } );
只要窗口大小发生像素变化 就会触发这个事件 常利用这个事件完成响应式布局 window.innerWidth当前屏幕宽度
定时器setTimeout
- window.setTimeout(调用函数 延时时间)
- window在调用的时候可以省略
- 延时的时间单位是毫秒 但是可以省略 如果省略默认是0
setTimeout(function() {
console.log('时间到了');
},2000)
或者
function callback() {
console.log('时间到了');
}
setTimeout(callback,5000);
页面中可能有很多定时器 为了区分 我们给定时器加标识符(名字)
var timer1 = setTimeout(callback,300);
var timer2 = setTimeout(callback,300);
- setTimeout()这个调用函数也称为回调函数callback
- 普通代码是按照代码顺序直接调用
- 但是这个函数需要等待时间 时间到了才去调用函数 因此称为回调函数(回头调用)
停止计时setTimeout()定时器
window.clearTimeout(timeoutID)
取消了先前通过调用setTimeout()建立的定时器
- window可以省略
- 里面的参数就是定时器的标识符
定时器setInterval
- 和setTimeout类似 但是setTimeout是延时的时间到了 就去调用这个回调函数 只调用一次 就结束了这个定时器
- 但是setInterval每隔这个延时时间 就去调用这个回调函数 会重复调用很多次
this的指向问题
1.全局作用域或者普通函数中this指向全局对象window(注意定时器里的this指向window)
console.log(this);
function fn() {
console.log(this)
}
window.fn();
window,setTimeout(function() {
console.log(this);
},1000)
2.方法的this是谁调用就指向谁
var btn = document.querySelector('button');
btn.addEventListener('click',function() {
console.log(this);指向的是button
})
js执行队列
js的一个特点就是单线程 就是说同一个时间只能做一件事
所以产生了一个问题就是如果js执行时间过长就会导致页面的渲染不连贯 页面渲染加载阻塞
所以说出现了同步和异步异步就是允许任务同时进行
console.log(1);
setTimeout(function() {
console.log(3);
},1000);
console.log(2);
输出内容:1->2->3
console.log(1);
setTimeout(function() {
console.log(3);
},0);
console.log(2);
输出内容:1->2->3
同步任务
同步任务都在主线程上执行 形成一个执行栈
异步任务
异步是通过回调函数实现的
有下面三个类型:
普通事件:click、realize等
资源加载:load、error等
定时器:setInterval、setTimeout等
异步任务会放到另一个任务队列(消息队列)中进行
主任务执行完毕后在执行任务队列的任务
由于主线程不断地重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环——反复检查是否有异步任务(有些异步任务需要onclick等操作才能唤醒)被遗漏
location对象
**URL:**统一资源定位符,是互联网上标准资源的地址,互联网上的每一个文件都有唯一的一个URL,包含的信息指出文件的位置和浏览器应该怎么处理他
location的对象属性:href和search尤为重要
location对象的方法
navigator对象
包含浏览器的信息 有很多属性 最常用的是userAgent 该属性可以返回有客户机发送服务器的user-agent头部的值
下列代码可以判断用户用哪个终端打开界面 实现跳转
history对象
window对象给我们提供了一个history对象,与浏览器历史记录进行交互 包含用户(在浏览器窗口中)访问过的URL)