文章目录
哪些事件会在页面加载完成(onload)之前触发?
History,Location,Window,Navigation的区别
e.target和e.currentTarget有什么区别?
冒泡 & 捕获
addEventListener
target & currentTarget
区别
哪些事件会在页面加载完成(onload)之前触发?
readystatechange
document有readyState属性来描述document的loading状态，readyState的改变会触发readystatechange事件.
1、loading
文档仍然在加载
2、interactive
文档结束加载并且被解析，但是像图片，样式, frame之类的子资源仍在加载
3、complete
文档和子资源已经结束加载，该状态表明将要触发load事件。
因此readystatechange在onload之前触发。
DOMContentLoaded
当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发,而无等待样式表、图像和子框架的完成加载。
另一个不同的事件load应该仅用于检测一个完全
加载的页面。因此DOMContentI oaded是HTML完全加载和解析完成之后发生的，发生时间点要早于load
在使用DOMContentLoaded更加合适的情况下使
用load是一个令人难以置信的流行的错误，所以要谨慎。
注意: DOMContentI oaded事件必须等待其所属
script之前的样式表加载解析完成才会触发。
History,Location,Window,Navigation的区别
★Navagator:提供有关浏览器的信息
★Window: Window对象处于对象层次的最顶层,
它提供了处理Navagator窗口的方法和属性
★Location:提供了与当前打开的URL-工作的方
法和属性，是一个静态的对象
★History:提供了与历史清单有关的信息
★Document:包含与文档元素一起工作的对象，它将这些元素封装起来供编程人员使用
e.target和e.currentTarget有什么区别?
冒泡 & 捕获
当你触发一个元素的事件的时候，该事件从该元素的祖先元素传递下去，此过程为捕获，而到达此元素之后，又会向其祖先元素传播上去，此过程为冒泡
addEventListener
addEventListener是为元素绑定事件的方法，他接收三个参数：
第一个参数：绑定的事件名
第二个参数：执行的函数
第三个参数：false：默认，代表冒泡时绑定;true：代表捕获时绑定
target & currentTarget
我们给四个div元素绑定事件，且addEventListener第三个参数不设置，则默认设置为false
const a = document.getElementById('a')
const b = document.getElementById('b')
const c = document.getElementById('c')
const d = document.getElementById('d')
a.addEventListener('click', (e) => {
const {
target,
currentTarget} = e
console.log(target是${target.id})
console.log(currentTarget是${currentTarget.id})
})
b.addEventListener('click', (e) => {
const {
target,
currentTarget} = e
console.log(target是${target.id})
console.log(currentTarget是${currentTarget.id})
})
c.addEventListener('click', (e) => {
const {
target,
currentTarget} = e
console.log(target是${target.id})
console.log(currentTarget是${currentTarget.id})
})
d.addEventListener('click', (e) => {
const {
target,
currentTarget} = e
console.log(target是${target.id})
console.log(currentTarget是${currentTarget.id})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
现在我们点击，看看输出的东西，可以看出触发的是d，而执行的元素是冒泡的顺序
target是d currentTarget是d
target是d currentTarget是c
target是d currentTarget是b
target是d currentTarget是a
1
2
3
4
我们把四个事件第三个参数都设置为true，我们看看输出结果，可以看出触发的是d，而执行的元素是捕获的顺序
target是d currentTarget是a
target是d currentTarget是b
target是d currentTarget是c
target是d currentTarget是d
1
2
3
4
区别
e.target：触发事件的元素
e.currentTarget：绑定事件的元素
