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/clintHightlet w=document.documentElement.clientWidthconsole.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日取214.getDay():获取星期,0~65.getHours():获取小时,0~236.getMinutes():获取分钟,0~597.getSeconds():获取秒,0~59


 

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

8.toTimeString():   18:41:20 GMT+0800 (中国标准时间)9.toDateString():   Tue Apr 23 202410.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()  //只能得到当前时间戳

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/4580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Springboot的甘肃旅游服务平台(有报告)。Javaee项目,springboot项目。

演示视频: 基于Springboot的甘肃旅游服务平台(有报告)。Javaee项目,springboot项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构…

学习周报:文献阅读+Fluent案例+有限体积法理论学习

目录 摘要 Abstract 文献阅读:基于物理信息神经网络的稀疏数据油藏模拟 文献摘要 文章讨论|结论 各方程和原理简介 PINN简介 域分解 实验设置 单相油藏问题 油水两相问题 Fluent实例:Y型弯管中的流体混合分析 几何建模部分 网格划分 求解器设…

获取boss直聘城市地区josn数据

获取boss直聘城市地区josn数据 当我需要爬取多个城市的地区的时候,只能手动点击,然后一个一个看 结果: 能看到所有区域所有子地区的地区代码 解析该JSON数据 import pandas as pd import requests code[] area[] 城市代码101210100 res…

VForm3的文件上传后的一种文件回显方式

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: h…

MySQL 查询优化思路

在统计的时候尝尝遇到过查询数据量大的情况,SQL会超时 下面是一些解决方案 (未经本人允许不得转载) 1、索引 加完看索引是否生效(一般情况都是普通索引tree)创建联合索引(注意顺序)2、 SQL语句…

git push 新分支出现remote unpack failed: error Missing blob报错可能原因之一

git push新分支是出现以下错误: error: remote unpack failed: error Missing blob xxxxx 前提条件:B是从A拉出来的分支,B分支在开发过程中A分支有新增提交到服务器端,在Git push B分支时报错如上。从描述看是缺了一个什么&…

程序员缓解工作压力的技巧

程序员在紧张的工作之余,放松自己是非常重要的。我了解到有几种方法可以帮助他们缓解压力、恢复精力。 首先,运动是个不错的选择。无论是去健身房锻炼身体,还是进行户外跑步、散步,都可以让程序员暂时忘记工作,释放压力…

GPT-SoVITS声音训练报错ZeroDivisionError: division by zero

环境: GPT-SoVITS-0421 问题描述: GPT-SoVITS声音训练报错ZeroDivisionError: division by zero Traceback (most recent call last):File "E:\GPT-SoVITS-0421\GPT-SoVITS-0421\GPT_SoVITS\s2_train.py", line 600, in <module>main()File "E:\GPT…

JAVA实操代码练习2

JAVA实操代码练习2 代码合集01(两个数的最小公倍数;n 个自然数的立方和;抽奖程序)代码合集02(纸张对折、5的阶乘、鸡鸡同笼、大小马匹、回文数、跳跃弹球)代码合集01(两个数的最小公倍数;n 个自然数的立方和;抽奖程序) import java.util.Scanner;public class lianxi0…

Windows电脑中护眼(夜间)模式的开启异常

我的电脑是联想小新16pro&#xff0c;Windows11版本。之前一直可以正常使用夜间模式&#xff0c;但是经过一次电脑的版本更新之后&#xff0c;我重启电脑发现我的夜间模式不能使用了。明明显示开启状态&#xff0c;但是却不能使用&#xff0c;电脑还是无法显示夜间模式。 询问…

谈谈 Java 反射机制,动态代理是基于什么原理

反射机制是 Java 语言提供的一种基础功能&#xff0c;赋予程序在运行时自省&#xff08;introspect&#xff0c;官方用语&#xff09;的能力。通过反射我们可以直接操作类或者对象&#xff0c;比如获取某个对象的类定义&#xff0c;获取类声明的属性和方法&#xff0c;调用方法…

第三节课,后端登录【1】.1--本人

一、后端登录逻辑&#xff0c;检测账户密码是否合法及密码输入是否正确 视频链接&#xff1a; 网址&#xff1a; 第三节&#xff1a;【视频】后端登录逻辑&#xff0c;检测账户密码是否合法及密码输入是否正确视频链接&#xff1a;-CSDN博客 从5.1开始 这是一个Java方法&am…

1438.绝对差不超过限制的最长连续子数组

显然我们是需要同时维护当前的最大值和最小值,这就需要两个单调队列dq_down(递减排列)一个维护最大值,dq_up(递增排列)一个维护最小值,同样这个是使用我们第二个模板 [left, i]. 只有当left等于某一个dq.front()的时候,才把它pop_front().这就使得对应相同的元素,我们只需要保…

004 死信(限制队列最大长度)

文章目录 消息ttl过期成为死信队列达到最大长度成为死信MyOrder.javaRabbitMQDirectConfig.javaOrderProducer.javaPayConsumer.javaDeadOrderConsumer.java application.yaml 死信就是无法被消费的消息。一般来说&#xff0c;producer 将消息投递到 broker 或者直接到 queue 中…

黑马点评项目遇到的部分问题

目录 1. Invalid default value for ‘begin_time‘报错2. [ThreadLocal](https://blog.csdn.net/u010445301/article/details/111322569)3. 悲观锁实现单体一人一单超卖问题4. redisson5. 回顾秒杀优化6. Nginx 负载均衡 1. Invalid default value for ‘begin_time‘报错 my…

Java设计模式_概述(设计模式类型和基本原则)

一、设计模式 设计模式&#xff08;Design pattern&#xff09;代表了最佳的实践&#xff0c;是软件开发人员在软件开发过程中面临一般问题的解决方案&#xff0c;是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。是优秀程序猿的经验结晶。 但不推荐刚入门的开…

如何删除.gitignore文件中指定的所有被忽略的文件

要删除.gitignore文件中指定的所有被忽略的文件&#xff0c;你可以使用git rm命令结合-r选项。以下是一些步骤&#xff1a; 查看将要删除的文件&#xff1a;首先&#xff0c;你可以使用git ls-files命令来列出被git忽略的文件&#xff0c;以确保你想要删除的文件列表是正确的。…

LeetCode 热题 100 Day06

矩阵相关题型 Leetcode 48. 旋转图像【中等】 题意理解&#xff1a; 将一个矩阵顺时针旋转90度&#xff0c;返回旋转后的矩阵。 要求&#xff1a; 在原地修改&#xff0c;不借助额外的空间 如果可以使用辅助数组来实现转置,则有 matrix_new[i][j]matrix[j][row-i-1]; 解…

Kubernetes学习-核心概念篇(三) 核心概念和专业术语

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Kubernetes渐进式学习-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 1. 前言 在前面两篇文章我们简单介绍了什么是K8S&#xff0c;以及K8S的…

mysql服务器无法启动问题处理

一台hlr服务器用网管软件登录失败&#xff0c;查找原因&#xff0c;发现网关软件连接服务器的tcp的10002端口失败&#xff0c;超时无应答&#xff0c;导致连接失败。 用户反馈核心网hlr&#xff0c;smc无法登录&#xff0c;putty登录服务器&#xff0c;发现hlr10002端口没有打…