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下图所示

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

也就是说一个如果一个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:获取的是大写的标签名

上一篇:【C#】初次使用webapi的体会


下一篇:【原创】Google 软件测试之角色职责