webapis-事件流三阶段和日期对象

1.事件冒泡

事件冒泡:当触发子元素的事件,所有父级元素'同名事件'依次触发
蓝色子元素<红色父元素<body<html<document<window

2.事件捕获

事件捕获 : 当触发子元素的交互 先从最外层父元素一级一级往里触发
window>document>html>body>父元素>子元素
只有唯一的方式可以注册捕获事件 addEventListener()第三个参数为true
其他所有注册事件方式,默认都是冒泡

注意:
事件捕获:从外往里捕获
事件冒泡:从里往外触发
注意: 同名事件  才会触发

3.事件流的三个阶段

1.事件捕获>2.事件目标>3.事件冒泡

4.阻止事件冒泡

语法:
事件对象.stopPropagation()

5.事件委托

事件委托: 给父元素注册,委托给子元素处理
1.事件委托底层原理:事件冒泡
2.事件委托应用:给动态新增元素注册事件
3.事件委托注意点:  不能使用this:this代表事件源,指向父元素  需要使用 e.target : 事件目标(触发本次冒泡的子元素)
document.querySelector('.btn').onclick = function(){
    document.querySelector('ul').innerHTML += `<li>我是动态新增li元素</li>`
}
document.querySelector('ul').onclick = function(e) {
       console.log( this )   (this 指 ul)
       
       console.log( e.target ) ( e.target 指 li元素)
       
       e.target.style.backgroundColor = 'red'
}

6.页面滚动事件

滚动条在滚动的时候持续触发的事件 
事件名:scroll
监听整个页面滚动:
window.addEventListener('scroll',function(){})


scrollLeft和scrollTop (属性) 
1.获取被卷去的大小
2.获取元素内容往左,往上滚出去看不到的距离
3.这两个值可读写的

获取元素的课件部分宽高(不包含边框 margin 滚动条等)
clientWidth
clientHeight

7.日期对象

什么是实例化?
 const data = new Data()
对象是由属性和方法组成  时间日期对象 提供一系列的方法
new 是一个对象 传给data的也是一个对象

1.获得当前时间 (电脑时间)
 const data = new Data()
 
2.得到指定时间   new Data( '年-月-日' )
 const data = new Data('2008-8-8')

8.时间戳

指的是从格林威治1970年01年01日00时00分00秒(北京事件1970年1月1日8时Feb0秒)到现在的总秒数
应用场景: 倒计时

事件戳:三种获取时间方法
1.使用getTime() 方法
2.简写 +new Date()
3.使用Date.now()

重点记住 +new Date() 因为可以返回当前的事件戳,或者指定的时间戳

公式 将时间戳转换为时分秒
const h = padZero(parseInt(tiem / 60 / 60 % 24))
            const f = padZero(parseInt(tiem / 60 % 60))
            const m = padZero(parseInt(tiem % 60))