[TOC]

✊总有人要成为第一，为什么不是你。

2021年08月17日

工作重点

1	工作重点事项	进度	已完成
2	早上讲js的阻止冒泡和阻止默认事件	已完成	- [x]

| | 3 | 下午讲坐标属性 | 已完成 |
- [x]

| | 4 | 晚上做练习 | 已完成 |
- [x]

遇到的问题和解决思路

遇到的问题

当元素没有一个定义的属性时
解决思路
返回的是undefined
今日总结
(1)addEventListener
<!DOCTYPE html>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit dicta reiciendis eos officia fugit aut
quo
vero, aperiam minima magni consequatur corporis cum, aliquid voluptas. Voluptate quaerat dolores mollitia
facilis.

(2)阻止默认事件
<!DOCTYPE html>

链接

(3)事件绑定的兼容处理
<!DOCTYPE html>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nemo sequi corrupti veniam ab voluptates,
porro ipsa eius dignissimos maiores eos minima est sapiente provident deleniti nesciunt magnam quam ipsum.

(4)关于坐标
<!DOCTYPE html>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui delectus fugit ducimus recusandae cum eaque
itaque? Laudantium, nulla, expedita nemo totam voluptatum, ipsam fugiat dolorum autem minus enim sapiente
tempore?

(5)offset
<!DOCTYPE html>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic fuga labore corporis tempore voluptate impedit.
Tenetur omnis consectetur ex maiores voluptate, nisi laboriosam quod quos nihil commodi magnam vero totam!

### (6)client <!DOCTYPE html>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Non quam ullam corrupti quis? Laborum delectus ut
error eligendi quia, obcaecati, officia perspiciatis qui fugiat dolorum quo autem! Saepe, consectetur ea.

### (7)scroll <!DOCTYPE html>

### (8)window <!DOCTYPE html>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe praesentium nihil, exercitationem dignissimos
consequatur dolor eos quae dolorum voluptas odit alias necessitatibus rem, natus, provident blanditiis
temporibus soluta similique? Hic!

7. 阻止事件传播

使用事件对象的 stopPropagation() 方法停止事件传播。

8. 阻止默认事件

方法一：使用事件对象的 preventDefault() 方法阻止默认行为。
方法二：在事件的处理函数中返回 false。

9.javascript中常用坐标属性

9.1 MouseEvent属性

由鼠标事件（MouseEvent）可以发现：
其中包含了许多的坐标，且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标，以及它们的含义。

1.clientX、clientY
点击位置距离当前body可视区域的x，y坐标
2.pageX、pageY(不会随着滚动条的滚动而改变)
对于整个页面来说，包括了被卷去的body部分的长度,相对文档区域左上角距离
3.screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标
4.offsetX、offsetY
鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框)

9.2 元素（HTMLElement）的offset属性(重点)

offset这个属性，可以说是非常有用的，顾名思义，offset翻译过来就是偏移量，从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。

1.offsetTop: 元素相对父元素上边的偏移。(只读)
2.offsetLeft：元素相对父元素左边的偏移。(只读)
3.offsetWidth：自身包括padding 、边框、内容区的宽度。
4.offsetHeight：自身包括padding、边框、内容区的高度。
5.offsetParent：作为偏移参照点的父级元素。

*多学一招：

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。

9.3 元素的client属性

clientHeight（clientWidth）:内容可视区域的高度/宽度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线)
clientLeft,clientTop: 这两个返回的是元素周围边框的厚度,可以理解为边框的长度,如果不指定一个边框或者不定位改元素,他的值就是0.

9.4 元素的scroll 属性

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

图片5.png

图片6.png
区别.gif

9.5 window属性

window.pageXOffset 获取当前页面相对于窗口显示区左上角的 X 位置。（页面滚动的距离）
window.pageYOffset 获取当前页面相对于窗口显示区左上角的 Y 位置。（只读）
window.screenLeft 可以获得浏览器距屏幕左上角的左边距
window.screenTop 可以获得浏览器距屏幕左上角的上边距
window.screen.width记录了客户端显示屏的宽
window.screen.height记录了客户端显示屏的高
window.innerWidth:返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。(只读)
window.innerHeight:返回以像素为单位的窗口的内部高度。如果有水平滚动条，也包括滚动条高度。(只读)

9.6 坐标属性总结

图片7.png

他们主要用法：
1.offset系列经常用于获得元素位置 offsetLeft offsetTop
2.client经常用于获取元素大小 clientWidth clientHeight
3.scroll 经常用于获取滚动距离 scrollTop scrollLeft
4.注意页面滚动的距离通过 window.pageXOffset 获得

自己总结

addEventListener

参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false(冒泡阶段),true(捕获阶段)

阻止冒泡

stopPropagation()(只是阻止冒泡阶段，若在捕获阶段触发则无效)

阻止默认事件

preventDefault()后面代码可以正常执行
return false后面代码不执行

兼容绑定事件

function bindMyEvent(ele, type, handleEvent) {
if (ele.addEventListener) {//若元素没有属性，则返回undefined
// 大部分浏览器兼容的方式
ele.addEventListener(type, handleEvent);
}
else if (ele.attachEvent) {
// ie8以下吧
ele.attachEvent(“on” + type, handleEvent);
} else {
ele[“on” + type] = handleEvent;
}
}

坐标属性

client

1.clientX、clientY(在当前点击位置，在body可视区域内的坐标)点击位置距离当前body可视区域的x，y坐标**
2.clientHeight（clientWidth）:内容可视区域的高度/宽度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线)

内容可视区域的高度/宽度，也就是说页面浏览器中可以看到内容的这个区域的高度
(不含边框，也不包含滚动条等边线)
可视区域的高/宽度
content + padding(不包含border)

3clientLeft,clientTop: 这两个返回的是元素周围边框的厚度,可以理解为边框的长度,如果不指定一个边框或者不定位改元素,他的值就是0

这两个返回的是元素周围边框的厚度,可以理解为边框的长度,
如果不指定一个边框或者不定改元素,他的值就是0.
获取元素的左/上边框的长度

offset

1.offsetTop: 元素相对父元素上边的偏移。(只读)

(相对于已经定位父(祖先)元素的上偏移量
如果父级无定位元素，则是相对于body的上偏移量
当前元素距离父元素border的距离
子元素的border到父元素的border的距离
只读)

2.offsetLeft：元素相对父元素左边的偏移。(只读)

(相对于已经定位父(祖先)元素的左偏移量
如果父级无定位元素，则是相对于body的左偏移量
当前元素距离父元素border的距离
子元素的border到父元素的border的距离
只读)

3.offsetWidth：自身包括padding 、边框、内容区的宽度。
4.offsetHeight：自身包括padding、边框、内容区的高度。
5.offsetParent：作为偏移参照点的父级元素
6.offsetX、offsetY鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框)**
scroll

scrollLeft 左侧被卷进去的距离
scrollTop 顶部被卷进去的距离
scrollWidth 内容的实际宽度(包括被卷进去的内容,不包括当前元素边框)
scrollHeight 内容的实际高度(包括被卷进去的内容,不包括当前元素边框)

window

window.pageXOffset 获取当前页面相对于窗口显示区左上角的 X 位置。（页面滚动的距离）
window.pageYOffset 获取当前页面相对于窗口显示区左上角的 Y 位置。（只读）
window.screenLeft 可以获得浏览器距屏幕左上角的左边距
window.screenTop 可以获得浏览器距屏幕左上角的上边距
window.screen.width记录了客户端显示屏的宽
window.screen.height记录了客户端显示屏的高
window.innerWidth:返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。(只读)
window.innerHeight:返回以像素为单位的窗口的内部高度。如果有水平滚动条，也包括滚动条高度。(只读)

page
pageX、pageY(不会随着滚动条的滚动而改变)当前点击位置，在整个文档中的坐标对于整个页面来说，包括了被卷去的body部分的长度,相对文档区域左上角距离**

screen
screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标

JavaScript

📝第十三天每日总结(js阻止冒泡和阻止默认事件和坐标属性)

2021年08月17日

工作重点

遇到的问题和解决思路

遇到的问题

解决思路

今日总结

(1)addEventListener

(2)阻止默认事件

(3)事件绑定的兼容处理

(4)关于坐标

(5)offset

7. 阻止事件传播

8. 阻止默认事件

9.javascript中常用坐标属性

9.1 MouseEvent属性

9.2 元素（HTMLElement）的offset属性(重点)

*多学一招：

9.3 元素的client属性

9.4 元素的scroll 属性

9.5 window属性

9.6 坐标属性总结

自己总结

addEventListener

阻止冒泡

阻止默认事件

兼容绑定事件

坐标属性

client

offset

scroll

window

page

screen

📝第十三天 每日总结(js阻止冒泡和阻止默认事件和坐标属性)

2021年08月17日

工作重点

遇到的问题和解决思路

遇到的问题

解决思路

今日总结

(1)addEventListener

(2)阻止默认事件

(3)事件绑定的兼容处理

(4)关于坐标

(5)offset

7. 阻止事件传播

8. 阻止默认事件

9.javascript中常用坐标属性

9.1 MouseEvent属性

9.2 元素（HTMLElement）的offset属性(重点)

*多学一招：

9.3 元素的client属性

9.4 元素的scroll 属性

9.5 window属性

9.6 坐标属性总结

自己总结

addEventListener

阻止冒泡

阻止默认事件

兼容绑定事件

坐标属性

client

offset

scroll

window

page

screen

📝第十三天每日总结(js阻止冒泡和阻止默认事件和坐标属性)