BOM
1.BOM
什么是bom
BOM是浏览器对象模型 ,核心对象是window,提供了与浏览器窗口进行交互的对象。
window是浏览器的顶级对象,是js访问浏览器的窗口,js所有的全局变量和函数window对象的属性和方法。
2.window常见事件
预加载:
① window.onload = function(){}
实现加载,因为html是按上下顺序执行,如果js代码放在上边就不好用了,可以使用onload预加载
②window.addEventListener(‘DOMContentLoaded’, function () { })
dom加载完就可以,速度比①快
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 由于按顺序执行,所以下面的代码出错,不会弹出
// var button = document.querySelector('button');
// button.addEventListener('click', function() {
// alert('11');
// } )
// ①onload方法,等待dom,图片,css等全部加载完
// 传统方法具有唯一性,起作用只能是最后一个
window.onload = function() {
var button = document.querySelector('button');
button.addEventListener('click', function() {
alert('11');
} )
}
// 事件监听方法可以绑定多个
window.addEventListener('load', function () {
var button = document.querySelector('button');
button.addEventListener('click', function() {
alert('131');
})
})
window.addEventListener('load', function () {
var button = document.querySelector('button');
button.addEventListener('click', function() {
alert('132');
})
})
// ②DOMContentLoaded,等待加载完dom就
window.addEventListener('DOMContentLoaded', function () {
alert('22222')
})
</script>
<button>点击</button>
</body>
</html>
调整窗口大小
利用resize事件,当窗口大小发生变化时,就会触发事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title