JS-事件和日期对象

1.事件流：

    1.事件捕获（同类型事件时）：从外层到内层；从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止

事件捕获，只能通过addEventListener并且参数写true才是事件捕获

其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false）

    2.事件冒泡：从内层到外层；如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发

元素->父元素->body->html->document->window

事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件

阻止冒泡：event.stopPropagation()//不仅阻止冒泡也会阻止捕获，即阻止传播（propagation：传播）

2.事件解绑：

1.on事件：

btn.onclick=()=>{console.log(1)}

btn.onclick=null

2.addEventListener事件：

btn.removeEventListener('click',function（需要从目标事件移除的函数，匿名函数无法被解绑）,捕获阶段（true）或冒泡阶段（false，默认）)

3.鼠标经过事件的区别：

mouseover（有冒泡效果） 与 moseenter（无冒泡效果）

mouseout（有冒泡效果） 与 mouseleave（无冒泡效果）（推荐）

3.事件委托：

事件委托是利用事件流的特征的技巧：给父级注册事件，当触发子元素时，冒泡给父元素，事件触发

事件委托选中触发事件的对象：e.target.style.backgroundColor = 'green'    e.target.classList.toggle('active')

 if (e.target.tagName == 'LI') {

                console.log('li');

            }

4.事件对象阻止默认行为：

const myLink = document.querySelector('#my-link');
myLink.addEventListener('click', function(event) {
  event.preventDefault();  // 阻止单击链接的默认行为
});Default//违约

 5.其他事件：

    页面加载事件：load(loading加载中)：监听页面所有事件加载完成 =>  给window加事件：   

     window.addEventListener('load',()=>{

            函数体；//等待页面的所有内容加载完毕后再执行函数体

        })

        img.addEventListener('load',()=>{

            函数体；//等待图片加载完了再执行函数体

        })

       

    使用箭头函数时this不生效：使用箭头函数时不创建实例，故不存在this指向

        DOMContentLoaded事件：初始的HTML文档加载后，该事件触发，无需等待样式表，图片加载完：给document加

 

    元素滚动事件：scroll：监听整个页面的滚动，给winwow加或document加

        获取位置后的属性：scrollTop上方超出页面的距离, scrollLeft左边超出的距离,

        document.documentElement => 获取HTML元素（整数要屏幕尺寸100%）

   

   

    页面尺寸事件（在窗口尺寸改变时触发事件）：resize（无媒体查询时用来做响应式网页）       

window.addEventListener('resize',()=>{

            //代码

            let w=document.documentElement.clientWidth

            //检测屏幕宽度/区域（div的width等等包含padding，不包含border）宽度：clientWidth/clintHight

            let w=document.documentElement.clientWidth

            console.log(w)

        })

 

        offset:获取元素自身的宽高（如果元素隐藏，则为0），包括自身设置，padding，border

        offsetWidth 和 offsetHight，offset……

        offsetTop 和 offsetLeft（只读属性）：获取元素距离自己定位父级元素的上，左距离

6.日期对象：

1.实例化：只要用new进行操作的

    获得当前时间：const date=new Date()

    获得指定日期：const date = new Date('2004-10-23 08:00:00')

2.日期对象的方法：将日期对象获得的数据进行格式处理 

  1.getFullYear():获得4位年份

    2.getMonth():获得月份，0~11，月份要加1才是真正的月份

    3.getDate():获取月份中的每一天，月份不同，值不同，例如4月21日取21

    4.getDay():获取星期，0~6

    5.getHours():获取小时，0~23

    6.getMinutes():获取分钟，0~59

    7.getSeconds():获取秒，0~59

 

    可在to后面加 Locale，得到当地时间的   

8.toTimeString():   18:41:20 GMT+0800 (中国标准时间)

    9.toDateString():   Tue Apr 23 2024

    10.toString():      Tue Apr 23 2024 18:43:25 GMT+0800 (中国标准时间)

使用方法：

let date = new Date()    

console.log(date.getDate());

时间戳（单位：毫秒）:1970年01月01日00时00分00秒（北京时间1970年01月01日08时00分00秒）起至现在的毫秒数

用于实现倒计时效果

方法1：getTime()     getTime('2024-4-23 19:07:00')

方法2：+new Date()   +new Date('2024-4-23 19:07:00')

方法3：Date.now()  //只能得到当前时间戳