JavaScript全解析——常见的BOM操作(下)
浏览器的常用事件
浏览器的 onload 事件
●这个不在是对象了，而是一个事件
●该事件是在页面所有资源(html 结构, 视音频, 图片 等)加载完毕后函数触发
window.onload = function () {
console.log('页面已经加载完毕')
}
在 html 页面中把 js 写在 head 里面
<!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>
<script>
// 这个代码执行的时候，body 还没有加载
// 这个时候我们就获取不到 body 中的那个 div
// 就需要使用 window.onload 事件
window.onload = function() {
// 这个函数会在页面加载完毕以后在执行
// 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
}
</script>
</head>
<body>
<div></div>
</body>
</html>
在html页面中把js写在body最后面
<!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>
<div></div>
<script>
// 这个代码执行的时候，body 已经加载完毕了
// 在这里就可以获取到 div，写不写 window.onload 就无所谓了
window.onload = function() {
// 这个函数会在页面加载完毕以后在执行
// 那么这个时候页面的 DOM 元素都已经加载了，我们就可以获取 div 了
}
</script>
</body>
</html>
浏览器的 onscroll 事件
●这个 onscroll 事件是当浏览器的滚动条滚动的时候触发，也就是滚动条的位置发生改变的时候触发
●这个滚动条的位置改变不管是横向滚动条还是纵向滚动条
●或者鼠标滚轮滚动的时候出发
window.onscroll = function () {
console.log('浏览器滚动了')
}
●注意：前提是页面的高度要超过浏览器的可是窗口才可以。就是要出现滚动条
浏览器滚动的距离(卷去的高度和宽度)
●浏览器内的内容即然可以滚动，那么我们就可以获取到浏览器滚动的距离
●思考一个问题?
○浏览器真的滚动了吗?
○其实我们的浏览器是没有滚动的，是一直在那里
○滚动的是什么?是我们的页面
○所以说，其实浏览器没有动，只不过是页面向上走了
●所以，这个已经不能单纯的算是浏览器的内容了，而是我们页面的内容
●所以不是在用 window 对象了，而是使用 document 对象
scrollTop
●获取的是页面向上滚动的距离
●一共有两个获取方式
○document.body.scrollTop
○document.documentElement.scrollTop
window.onscroll = function () {
console.log(document.body.scrollTop)
console.log(document.documentElement.scrollTop)
}
●两个都是获取页面向上滚动的距离
●区别：
○IE 浏览器
■没有 DOCTYPE 声明的时候，用这两个都行
■有 DOCTYPE 声明的时候，只能用 document.documentElement.scrollTop
○Chrome 和 FireFox
■没有 DOCTYPE 声明的时候，用 document.body.scrollTop
■有 DOCTYPE 声明的时候，用 document.documentElement.scrollTop
scrollLeft
●获取页面向左滚动的距离
●也是两个方法
○document.body.scrollLeft
○document.documentElementLeft
window.onscroll = function () {
console.log(document.body.scrollLeft)
console.log(document.documentElement.scrollLeft)
}
○两个之间的区别和之前的 scrollTop 一样
浏览器的onresize事件
●onresize 事件在浏览器窗口被调整大小时发生
●不管横向还是纵向, 只要尺寸改变了就会触发此事件
●语法：window.onresize = function () {}
window.onresize = function() {
// 获取浏览器窗口尺寸
var width = window.innerWidth
if (width >= 600) {
window.alert('你好啊')
}
}
设置滚动条的偏移位置(滚动到) —scrollTo
●对浏览器的滚动条进行定位,其实也就是设置浏览器卷去的高度和宽度
●根据传递不同的参数决定不同的表现形式
○传递数字
■语法：window.scrollTo(x, y)
●x: 表示设置卷去的宽度
●y: 表示设置卷去的高度
■注意：必须同时传递两个参数，同时也只能进行瞬间定位, 不能平滑滚动
<!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>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<button id='go'>走你</button>
<script>
go.onclick = function() {
window.scrollTo(1000, 800)
}
</script>
</body>
</html>
●传递一个对象数据类型
○语法：window.scrollTo({top: yyy,left: xxx,behavior: 'smooth'})
○注意：
■如果你传递对象数据类型, 那么在对象内, 可以只写一个值
■默认是瞬间定位, 可以通过对象内的第三个成员来让他实现平滑滚动
<!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>
<style>
body {
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<button id='go'>走你</button>
<script>
go.onclick = function() {
window.scrollTo({
top: 100,
left: 500,
behavior: "smooth"
})
}
</script>
</body>
</html>
浏览器的历史记录
●window 中有一个对象叫做 history
●是专门用来存储历史记录信息的
●也就说history 对象保存了当前窗口访问过的所有页面网址
history.back()
●作用：history.back方法是用来回退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮
●语法：window.history.back()
window.history.back()
●前提是你要有上一条记录，不然就是一直在这个页面，也不会回退
history.forward()
●history.forward 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮
●语法：window.history.forward()
window.history.forward()
●前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个
history.go()
●作用：进行历史跳转, 根据参数的不同进行不同的跳转
●语法：window.history.go(数字)
○数字可以是正整数、可以是0也可以是负整数
■正整数表示历史前进
■0重新打开当前页，相当于刷新一样
■负整数表示历史后退
window.history.go(2)
window.history.go(0)
window.history.go(-2)浏览器的标签页
●就是操作浏览器标签页的方法
window.open方法
●作用：开启一个新的标签页或者打开指定地址
●语法：window.open('地址')
window.open('https://www.baidu.com')
window.close 方法
●作用：关闭当前标签页或者说关闭浏览器窗口
●语法：window.close()
window.close()
猜你喜欢LIKE
相关推荐HOT
更多>>
servlet底层原理是什么？
1、ServletAPI核心类与接口2、Servlet类处理请求的流程创建servlet类的步骤：创建一个命名为TestServlet继承javax.servlet.http.HttpServlet类详情>>
2023-05-30 10:41:22
多线程的优势与劣势分别是什么？
多线程是指在同一个程序中，同时运行多个线程，每个线程都可以独立执行不同的任务，相互之间不会干扰。多线程的优势和劣势如下：优势：提高程序...详情>>
2023-05-30 10:32:12
设计模式之生产者与消费者的代码实现
本文主要讲述生产者和消费者模式，文中会使用通俗易懂的案例，使你更好地学习本章知识点并理解原理，做到有道无术。什么是生产者和消费者模式生...详情>>
2023-05-30 10:25:46
从零开始学Java之interface接口
一.接口简介简介Java中的接口(interface)类似于是一种特殊的抽象类，它也是众多抽象方法的集合。接口的定义方式、组成部分都与抽象类相似，却比...详情>>
2023-05-29 11:26:17热门推荐
如何进行mysql数据备份？
沸什么是servlet的生命周期？servlet请求处理流程是怎样的？
热servlet底层原理是什么？
热怎样编写java程序？
新多线程的优势与劣势分别是什么？
ssm框架的作用与原理是什么？
设计模式之生产者与消费者的代码实现
接口和抽象类有什么区别？4个方面对比
从零开始学Java之interface接口
从零开始学Java之Java中的内部类是怎么回事？
一分钟带你了解MySQL——基础与介绍
在java中，super关键字怎样使用
什么是事件流以及事件流的传播机制 ？
弹性盒有哪些属性是在父元素身上？
技术干货
京公网安备 11010802030320号