WebAPI之日期对象、事件对象、事件流、阻止默认行为

目录

一、日期对象

1、日期对象的创建

2、时间对象之方法

3、时间戳

二、事件对象

1、事件对象的获取

2、把事件对象里边的信息拿出来

三、事件流

1、事件冒泡

2、事件捕获

3、阻止事件流

四、阻止默认行为

五、事件委托

---

一、日期对象

1、日期对象的创建

let time = new Date()

获取计算机当前时间给变量time

let time2 = new Date('2021-1-5 12:45:32')

创建时间对象时指定时间（传的是字符串）

let time3 = new Date(2021,0,2,16,32,12) // 代表2021年1月2日16点32分12秒

创建时间对象时指定时间（传的是数字，分别是年、月、日、时、分、秒），time3代表2021年1月2日16点32分12秒，如果对应位置没有值默认是0。

2、时间对象之方法

let YYYY=time.getFullYear()	把time中的年份赋值给变量YYYY
let MM=time.getMonth()	把time中的月份赋值给MM(月份从0开始计)
let DD=time.getDate()	把time中的日子赋值给DD
let WW=time.getDay()	把time中的星期赋值给DD(0代表星期日)
let hh=time.getHours()	把time中的小时赋值给hh
let mm=time.getMinutes()	把time中的分钟赋值给mm
let ss=time.getSeconds()	把time中的秒赋值给ss
let ms=time.getMilliseconds()	获取time中的毫秒赋值给ms

3、时间戳

时间戳在JS中是指，从1970年1月1日0时0分0秒到现在的毫秒数

如何获得时间戳？

方法一  用+号

let time = new Date()
time.getTime() // 得到时间
Number(time)
+time

也就是在时间变量前边加一个‘+’号，此时，time变量就变成了一个时间戳。

方法二  Date.now()

let time1 = Date.now()

此时，time1直接就是时间戳形式。

两个时间对象相减会得到他们相差的毫秒数，用的很多

        // 获取当前时间
        let time1 = new Date()
        // 获取指定时间
        let time2 = new Date('2021-12-4 10:35')

        // 算术运算符里只要是除了+以外的算术运算符
        // 两边有非数字，都会吧非数字转成数字类型
        // 如果把时间对象转成数字类型，会得到时间戳
        // 所以两个时间对象相减，相当于是用两个时间的时间戳进行相减

     
        // 要记的：两个时间对象相减，得到是两个时间相差的毫秒数
        console.log(time2 - time1 )

二、事件对象

1、事件对象的获取

事件对象就是事件触发时，浏览器自动帮我们产生的一个对象，当你触发时，事件对象里就有你点击的位置坐标等信息。

btn.addEventListener('click', function (形参) {
    
    // 这个形参就是事件对象
})

事件对象这个形参名可以随便写，但是规范建议名字叫叫 e、ev、event

2、把事件对象里边的信息拿出来

e.type

事件对象e中的事件类型，是被点击了（click）还是被双击了（dblclick）

e.pageX / pageY

事件对象e发生在了哪里,相对整个页面的坐标,(0,0)在左上角

e.clientX / clientY

事件对象e发生在了哪里,相对可视区域的坐标,(0,0)在左上角

e.offsetX / offsetY

事件对象e发生在了哪里,相对自身原本位置的坐标,(0,0)在左上角

e.key

事件对象e记录按下的键,按下a就返回a,按下b就返回b,如果按的是回车得到Enter

一般用在 keydown（键盘按下事件）和 keyup （键盘弹起事件）

三、事件流

事件流，指的是一次事件触发时事件的完整流动路径

例如：下图，假设body里有个div，当div被点击了，那么完整的 事件流动路径 如2下图所示

也就是说一个如果一个div被点击，那么没有先直接来到div这里，而是先从 document 开始一级一级往下，直到这个 div，然后再从这个div一级一级往上回到 document，这就是一个事件的完整流动过程，称之为事件流

为什么会这么流动呢？

因为当一个div被点击，其实最早并不是由div先发现的，而是先由浏览器发现的，所以需要一级一级往下找到真正触发事件元素，再处理事件，处理完再一级一级往上依次反馈

事件流动分为三大阶段

捕获阶段：从document开始一级一级往下

目标阶段：真正触发事件的元素

冒泡阶段：从真正触发事件的元素再一级一级往上调用

1、事件冒泡

从真正触发元素一级一级往上直到document的过程

事件冒泡默认就存在（不管你是用什么方式绑定事件，所有事件都有冒泡）

现象：触发子元素的click点击事件，那么父元素的click点击事件也会被触发。

2、事件捕获

事件捕获：它是从 document 开始一级一级往下，直到真正触发事件的元素

事件捕获默认看不到效果，要想看到效果必须写特殊代码

元素.addEventListener('事件类型', 回调函数, true)

要想看到事件捕获，必须用 L2 事件注册语法，且第三个参数要传true

0级事件绑定语法，不能看到捕获，所以你可以说0级事件只有冒泡没有捕获

---

事件流就是，div发生点击事件，

先发生事件捕获，document的同名事件触发，html的同名事件触发，body的同名事件触发，最后是div的事件触发，但是这个过程并不显示效果，需要加true。

然后发生事件冒泡，div事件触发后，body同名事件触发，html的同名事件触发，document的同名事件触发，这个过程会显示效果。

L0级事件并不会产生事件捕获，它只有事件冒泡。

3、阻止事件流

e.stopPropagation()

首先加一个事件捕获，对这个事件捕获加上.stopProagation()这样事件流就会停在加阻止事件流的元素上了.

四、阻止默认行为

默认行为：

有很多标签默认是有事件的，例如 a标签，他默认也有点击事件，点击事件的效果是跳转

我们把它这种默认具备的事件触发的行为，称之为事件默认行为

可是很多时候我不需要触发它的默认行为

阻止事件默认行为

事件对象.preventDefault()

五、事件委托

是指把需要给子元素添加的事件，委托给父元素来触发

       如果多个子元素要加事件，而且还要保证动态添加的子元素有事件，一定要用事件委托更方便

       因为这种情况如果不用事件委托，会浪费内存，且动态添加的子元素默认不会有事件

事件委托语法

父元素.addEventListener('事件名', function (e) {
    
    if (e.target.tagName == 'LI') {
        
        // 写事件要做的代码
    }
})

原理：利用了事件冒泡默认存在，所以不管是哪个子元素触发都会冒泡到父元素

但是很多时候我又不希望所有子元素都能触发，所以在父元素上还会做判断，判断是不是我们想要触发的元素来触发的

• 知识点：

e.target：获取的是真正触发事件的元素

tagName：获取的是大写的标签名