1.事件
1.1 事件概述
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
简单理解: 触发--- 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
1.2 事件三要素
-
事件源(谁):触发事件的元素
-
事件类型(什么事件): 例如 click 点击事件
-
事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数
1.3 事件对象event
在触发DOM元素上的某个事件时,会产生一个事件对象event,这个事件对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。
-
什么时候会产生event 对象呢?
例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象. -
事件通常与函数结合使用,函数不会在事件发生前被执行!
1.3.1 事件对象的使用
<!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>
.box {
width: 500px;
height: 500px;
border: 1px solid #f00;
overflow: auto;
}
.son{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<a href="https://www.baidu.com">跳转</a>
<script>
// 事件对象
var box = document.getElementsByTagName("div")[0];
var son = document.getElementsByClassName("son")[0];
var alink = document.getElementsByTagName("a")[0];
// 事件对象的使用
box.onclick = function(event){
event.stopPropagation();
console.log(box);
console.log(event);
// target 事件的触发者
console.log(event.target);
}
son.onclick = function (e) {
// 阻止事件传播(阻止事件冒泡)
// e.stopPropagation();
console.log(son);
}
alink.onclick = function(e){
// 阻止默认事件
e.preventDefault();
}
</script>
</body>
</html>
1.3.2 事件对象(event)的属性
属性和方法 | 描述 |
---|---|
type | 返回当前 event 对象表示的事件的名称。 |
preventDefault() | 通知浏览器不要执行与事件关联的默认动作(阻止默认行为) |
target | 返回触发此事件的元素(事件的目标节点)。 |
currentTarget | 返回其事件监听器触发该事件的元素。 |
keyCode | 返回键盘事件中的键码值 |
stopPropagation() | 阻止事件传播。 |
1.3.3 this指向总结(重点)
-
自定义构造函数中this:指向实例化对象
-
普通函数中this:指向window
-
自定义对象的方法中this:指向当前对象
-
事件绑定的函数中的this:指向事件的绑定者
1.3.4 事件对象的兼容性写法
<!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>
function addMyEvent(ele, type, fun) {
// 标准浏览器
if (ele.addEventListener) {
ele.addEventListener(type, fun)
} else if (ele.attachEvent) { // 如果有 attachEvent 方法,代表是 IE浏览器
ele.attachEvent("on" + type, fun)
} else {
ele["on" + type] = fun;
}
}
var box = document.getElementsByTagName("div")[0];
addMyEvent(box, "click", function () {
console.log(this);
})
</script>
</body>
</html>
2. 事件的类型
2.1 鼠标事件(12个)
<!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>
.box {
width: 200px;
height: 200px;
border: 1px solid #f00;
overflow: auto;
}
.son{
width: 100px;
height: 800px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
// 事件三要素
// 事件源
// 事件类型
// 事件处理程序
// 获取元素
var box = document.getElementsByTagName("div")[0];
// onmouseover 鼠标刚进入元素时触发
// box.onmouseover = function () {
// console.log("鼠标刚进入元素");
// }
// onmouseenter 鼠标完全进入时触发
// box.onmouseenter = function(){
// console.log("鼠标完全进入元素");
// }
// onmouseover(onmouseout) 和 onmouseenter(onmouseleave) 区别: 是否进行事件冒泡
// onmousemove 鼠标在元素上移动时触发
// box.onmousemove = function(){
// console.log("鼠标移动");
// }
// onmouseout 鼠标刚要离开元素时触发
// box.onmouseout = function(){
// console.log("我走了");
// }
// onmouseleave 鼠标完全离开元素时触发
// box.onmouseleave = function(){
// console.log("我真走了啊");
// }
// onmousedown 鼠标按下时触发
// box.onmousedown = function(){
// console.log("鼠标按下");
// }
// onmouseup 鼠标弹起时触发
// box.onmouseup = function(){
// console.log("鼠标弹起");
// }
// onclick 鼠标单击事件
// box.onclick = function(){
// console.log("点我");
// }
// ondblclick 鼠标双击事件
// box.ondblclick = function(){
// console.log("双击666");
// }
// onmousewheel 鼠标滚轮被滚动时触发
// box.onmousewheel = function(){
// console.log("车轮滚滚");
// }
// onscroll 当元素滚动条被滚动时触发
box.onscroll = function(){
console.log("滚动条动了");
}
// oncontextmenu 当用户点击鼠标右键打开菜单时触发
box.oncontextmenu = function(){
console.log("你想干啥?");
}
</script>
</body>
</html>
事件类型 | 说明 |
---|---|
onmouseover | 鼠标刚进入元素时触发 |
onmouseenter | 鼠标完全进入元素时触发 |
onmousemove | 鼠标在元素上移动时触发 |
onmouseout | 鼠标刚要离开元素时触发 |
onmouseleave | 鼠标完全离开元素时触发 |
onmousedown | 鼠标按下时触发 |
onmouseup | 鼠标弹起时触发 |
onclick | 鼠标单击时触发 |
ondblclick | 鼠标双击时触发 |
onmousewheel | 当鼠标滚轮正在被滚动时运行的脚本 |
onscroll | 当元素滚动条被滚动时运行的脚本 |
oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发(右击) |
循环绑定事件
<!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>
*{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 150px;
height: 60px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var oli = document.getElementsByTagName("li");
// 循环绑定事件
for(var i=0;i<oli.length;i++){
oli[i].onclick = function(){
console.log(this);
}
}
</script>
</body>
</html>
2.2 表单事件(6个)
事件类型 | 说明 |
---|---|
onchange | 内容改变事件 |
onfocus | 获取焦点时触发的事件 |
onblur | 失去焦点时触发的事件 |
oninput | 输入事件 |
onsubmit | 表单提交事件 |
onreset | 表单重置事件 |
<!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>
<!-- 表单 -->
<!-- 输入框 -->
<!-- type 输入框类型 -->
<!-- text password radio checkbox file submit reset button -->
<!-- name 输入框名称 -->
<!-- value 输入框的值 -->
<!-- placeholder 输入框的提示信息 -->
<!-- maxlength 输入框的最大输入长度 -->
<!-- <input type="text" name="" value="" placeholder="提示信息" maxlength="10"> -->
<!-- 下拉列表 -->
<!-- <select name="" id="">
<option value=""></option>
</select> -->
<!-- 文本域 -->
<!-- <textarea name="" id="" cols="30" rows="10" maxlength=""></textarea> -->
<!-- 表单事件 -->
<form action="">
<input type="text">
<!-- 提交 -->
<input type="submit">
<!-- 充值 -->
<input type="reset">
</form>
<script>
var inp = document.getElementsByTagName("input")[0];
var oform = document.getElementsByTagName("form")[0];
// 1.onchange 内容改变事件(当输入框失焦,才代表输入结束,才会执行onchange)
inp.onchange = function () {
console.log("内容改变了");
}
// onfocus 获取焦点时触发
inp.onfocus = function () {
console.log("获取焦点");
}
// onblur 失去焦点时触发
inp.onblur = function () {
console.log("失去焦点");
}
// oninput 输入事件(正在输入)
inp.oninput = function () {
console.log("正在输入");
}
// onsubmit 表单提交事件
oform.onsubmit = function(){
console.log("提交");
}
// onreset 表单重置事件
oform.onreset = function(){
console.log("重置");
}
</script>
</body>
</html>
2.2.1表单事件应用的场景
<!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>
div{
width: 233px;
height: 156px;
position: relative;
}
span {
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<input type="text">
<div>
<textarea name="" id="" cols="30" rows="10" maxlength="300"></textarea>
<span>还能输入300字</span>
</div>
<script>
var oinp = document.getElementsByTagName("input")[0];
var text = document.getElementsByTagName("textarea")[0];
var msg = document.getElementsByTagName("span")[0];
// 在输入结束之后拿到输入框中的值
oinp.onchange = function () {
console.log("输入结束");
console.log(oinp.value);
}
// 在获取焦点之后
oinp.onfocus = function () {
console.log("获取焦点");
console.log("展示搜索记录");
console.log("清除提示信息");
}
// 实时监听用户的输入
text.oninput = function () {
console.log(text.value.length);
msg.innerHTML = "还能输入" + (300-text.value.length) + "字";
}
</script>
</body>
</html>
2.3 键盘事件(3个)
事件类型 | 说明 |
---|---|
onkeydown | 键盘按键按下时触发 |
onkeypress | 键盘按着不放时触发 |
onkeyup | 键盘按键弹起时触发 |
e.keyCode:获取输入键盘的键码,13回车
<!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>
// 键盘按下事件
window.onkeydown = function (e) {
console.log("键盘按下");
// console.log(e);
// 触发键盘按下事件的键码
console.log(e.keyCode);
if(e.keyCode === 13){
console.log("按下回车键要执行的代码");
}
}
// 键盘弹起事件
window.onkeyup = function () {
console.log("键盘弹起");
}
// 键盘按着不放时触发
// window.onkeypress = function(){
// console.log("按着不松");
// }
</script>
</body>
</html>
2.4 窗口事件(3个)
事件类型 | 说明 |
---|---|
onload | 文档及其资源文件都加载完成时触发 |
onresize | 事件会在窗口或框架被调整大小时发生。 |
onunload | 关闭网页时 |
<!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>
window.onload = function () {
var box2 = document.getElementsByTagName("div")[0];
console.log(box2);
}
</script>
</head>
<body>
<div>我爱你,其他两句,都是废话</div>
<script>
// onload 当文档和资源文件加载完成时触发
// window.onload = function () {
// console.log("加载完成");
// }
var box1 = document.getElementsByTagName("div")[0];
console.log(box1);
// onresize 窗口大小发生变化时触发
window.onresize = function(){
console.log("窗口发生变化");
}
// 关闭网页时触发
window.onunload = function(){
console.log("拜拜");
}
</script>
</body>
</html>
3. 注册事件处理程序
3.1 通过HTML标签属性注册事件处理程序
3.2 通过DOM元素属性注册事件处理程序
3.3 使用addEventListener()方法注册事件处理程序
-
addEventListener事件绑定、监听、捕获 ---》标准浏览器中有作用,非标准IE不兼容
-
语法:元素.addEventListener(事件名,函数,true/false) true代表事件捕获,false代表事件冒泡。
-
由于现在的浏览器都是执行事件冒泡,所以第三个参数通常写成false。
使用方法
<!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>
<!-- 1.通过html标签直接添加事件 -->
<div onclick="alert('你好')">一行写你,一行写我,一行写我们</div>
<script>
var box = document.getElementsByTagName("div")[0];
// 2.通过 "on" 绑定事件,相同事件只能执行一个
// box.onclick = function(){
// alert("说的太好了!");
// }
// box.onclick = function () {
// alert("会说你就多说两句");
// }
// 3.addEventListener() 可以添加多个相同的事件
box.addEventListener("click", function() {
alert("太感动了!");
});
box.addEventListener("click", function() {
alert("呜呜呜~");
});
box.addEventListener("mouseover", function() {
console.log("来了老弟?");
})
</script>
</body>
</html>
4.事件传递过程(事件流)
JS和HTMl元素的交互几乎都是通过“事件”来完成的,事件从触发到完成响应一般分为3个阶段:捕获阶段,目标阶段和冒泡阶段。
-
捕获阶段
:事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事件,直到达到目标节点。 -
目标(target)阶段
:在此阶段中,事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后,就会运行该监听器。 -
事件冒泡
: 当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制。在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,直到到达最外面的元素。如果把事件处理程序指定给所有的元素,那么这些事件将依次触发。
-
1、一个完整的JS事件流是从window开始,最后回到window的一个过程
-
2、事件流被分为三个阶段(1-5)捕获过程、(5-6)目标过程、(6-10)冒泡过程
5.阻止默认事件
<!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>
<a href="https://www.baidu.com">百度</a>
<script>
var alink = document.getElementsByTagName("a")[0];
alink.onclick = function(e) {
// 阻止默认事件
// 1.添加prevenDefault()
e.preventDefault();
// 2. 添加retur false
return false;
}
</script>
</body>
</html>
6.事件委托
原本绑定在子元素身上的事件,现在绑定到父元素上,利用事件冒泡的传递的过程,来触发当前的事件,这样的做法叫做事件委托,也叫事件代理。
<!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>
*{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 150px;
height: 60px;
border: 1px solid #ccc;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
// 有10个li,都要绑定鼠标移入事件
// 循环绑定事件
// var oli = document.getElementsByTagName("li");
// for(var i=0;i<oli.length;i++){
// oli[i].onmouseover = function(){
// this.style.backgroundColor = "pink";
// }
// oli[i].onmouseout = function(){
// this.style.backgroundColor = "transparent";
// }
// }
// 事件委托:将原本绑定在子元素身上的事件,绑定在父元素身上,利用事件冒泡传递的过程来触发当前的事件,这样的做法叫做事件委托,也叫事件代理。
// 获取父元素
var oul = document.getElementsByTagName("ul")[0];
oul.onmouseover = function(e){
// 事件的触发者
console.log(e.target);
e.target.style.backgroundColor = "pink"
}
oul.onmouseout = function(e){
// 事件的触发者
console.log(e.target);
e.target.style.backgroundColor = "transparent"
}
</script>
</body>
</html>
7.JavaScript种常用的坐标属性
7.1MouseEvent属性
由鼠标事件(MouseEvent)可以发现: 其中包含了许多的坐标,且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标,以及它们的含义。
属性 | 作用 |
---|---|
clientX、clientY | 点击位置距离当前body可视区域的x,y坐标 |
pageX、pageY | (不会随着滚动条的滚动而改变)对于整个页面来说,包括了被卷去的body部分的长度,相对文档区域左上角距离 |
screenX、screenY | 点击位置距离当前电脑屏幕的x,y坐标 |
offsetX、offsetY | 鼠标相对于事件源元素的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>
div{
width: 2000px;
height: 1200px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<div></div>
<script>
var box = document.getElementsByTagName("div")[0];
box.onclick = function(e){
// clientX clientY 点击位置距离 body 可视区域的 x 坐标和 y 坐标
console.log(e.clientX);
console.log(e.clientY);
console.log("-------------------------------------");
// pageX pageY (不会随着滚动条的滚动而改变)对于整个页面来说,包括了被卷去的body部分的长度,相对文档区域左上角距离
console.log(e.pageX);
console.log(e.pageY);
console.log("-------------------------------------");
// screenX screenY 点击位置距离电脑屏幕边缘的距离
console.log(e.screenX);
console.log(e.screenY);
console.log("-------------------------------------");
// offsetX offsetY 鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框)
console.log(e.offsetX);
console.log(e.offsetY);
}
</script>
</body>
</html>
7.2 元素(HTMLElement)的offset属性(重点)
offset这个属性,可以说是非常有用的,顾名思义,offset翻译过来就是偏移量,从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。
属性 | 作用 |
---|---|
offsetTop | 元素相对父元素上边的偏移。(只读) |
offsetLeft | 元素相对父元素左边的偏移。(只读) |
offsetWidth | 自身包括padding 、 边框、内容区的宽度。 |
offsetHeight | 自身包括padding、边框、内容区的高度。 |
offsetParent | 作为偏移参照点的父级元素。 |
<!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>
.father{
width: 500px;
height: 500px;
border: 1px solid #ccc;
position: relative;
margin: 20px 50px;
}
.box{
width: 200px;
height: 200px;
border: 1px solid #f00;
position: absolute;
left: 100px;
top: 80px;
}
</style>
</head>
<body>
<div class="father">
<div class="box" style="color: red;"></div>
</div>
<script>
var box = document.getElementsByClassName("box")[0];
// DOM 对象 属性
console.dir(box);
// 只读不可写
// offsetWidth 盒子的宽
// offsetHeight 盒子的高
// offsetLeft 盒子的左偏移量
// offsetTop 盒子的上偏移量
// offsetParent 做为参照的父级元素
console.log(box.offsetLeft); // 100
console.log(box.offsetTop); // 80
console.log(box.offsetWidth); // 202
console.log(box.offsetHeight); // 202
console.log(box.style.left); // 不会得到偏移量
console.log(box.style.width); // 不会得到宽
console.log(box.style.color); // 只有样式在行内才能获取到
// 设置样式,后面是字符串
// box.style.left = "200px"
box.offsetLeft = 400;
</script>
</body>
</html>
offsetLeft 和left 的区别
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的。
区别在于:
-
style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算, 还用offsetLeft比较方便。
-
style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left。
7.3 元素的client属性
属性 | 作用 |
---|---|
clientHeight/clientWidth | 内容可视区域的高度/宽度,也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框,也不包含滚动条等边线) |
clientLeft/clientTop | 这两个返回的是元素周围边框的厚度,可以理解为边框的长度,如果不指定一个边框或者不定位改元素,他的值就是0. |
<!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>
div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
<script>
var box = document.getElementsByTagName("div")[0];
// clientWidth clientHeight 元素可视区域的宽高
console.log(box.clientWidth);
console.log(box.clientHeight);
// clientLeft clientTop 元素的边框厚度
console.log(box.clientLeft);
console.log(box.clientTop);
</script>
</body>
</html>
7.4 元素的scroll 属性
scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
属性 | 作用 |
---|---|
scrollTop | 返回被卷去的上侧距离,返回数值不带单位 |
scrollLeft | 返回被卷去的左侧距离,返回数值不带单位 |
scrollWidth | 返回自身实际的宽度,不含边框,返回数值不带单位 |
scrollHeight | 返回自身实际的高度,不含边框,返回数值不带单位 |
<!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>
.father{
width: 200px;
height: 500px;
border: 1px solid #f00;
margin: 0 auto;
overflow: auto;
}
.son{
width: 400px;
height: 800px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var box = document.getElementsByClassName("father")[0];
// scrollTop scrollLeft 元素被卷进去的距离
// scrollWidth scrollHeight 返回自身实际的宽度和高度
document.onscroll = function () {
console.log(document.documentElement.scrollTop);
}
box.onscroll = function(){
console.log(box.scrollTop);
console.log(box.scrollLeft);
console.log(box.scrollWidth);
console.log(box.scrollHeight);
}
</script>
</body>
</html>
7.5 window的坐标属性
属性 | 作用 |
---|---|
window.innerWidth | 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。(只读) |
window.innerHeight | 返回以像素为单位的窗口的内部高度。如果有水平滚动条,也包括滚动条高度。(只读) |
window.pageXOffset | 获取当前页面相对于窗口显示区左上角的 X 位置。(只读)<br />(页面卷进去的距离) |
window.pageYOffset | 获取当前页面相对于窗口显示区左上角的 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>
div{
width: 2000px;
height: 2000px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div></div>
<script>
// window.innerWidth 窗口的宽度
// window.innerHeight 窗口的高度
console.log(window.innerWidth);
console.log(window.innerHeight);
// window.pageXOffset 窗口被卷到左边的大小
console.log(window.pageXOffset);
// window.pageYOffset 窗口被卷到上边的大小
console.log(window.pageYOffset);
</script>
</body>
</html>