时间对象
时间对象：用来表示时间的对象 作用：可以得到当前系统时间
一、实例化
在代码中发现了 new 关键字时，一般将这个操作称为实例化 创建一个时间对象并获取时间 1.获取当前时间
<script>
// 获得当前时间
let date=new Date()
// 获得指定时间
let date=new Date('1949-10-01')
</script>
二、时间对象方法
因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
三、时间戳
时间戳 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式 三种方式获取时间戳：
1. 使用 getTime() 方法
<script>
// 1.实例化
let date=new Date()
// 2.获取时间戳
console.log(date.getTime());
</script>
2.简写 +new Date()
<script>
console.log(+new Date());
</script>
3. 使用 Date.now()
<script>
console.log(Date.now());
</script>
①无需实例化 ②但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳
事件对象
1.事件对象也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
2.获取方式
①在事件绑定的回调函数的第一个参数就是事件对象 ②一般命名为event、ev、e
3.部分常用属性
①type 获取当前的事件类型
<script>
const btn=document.querySelector('button')
btn.addEventListener('click',function (event) {
console.log(event.type);//输入当前的事件类型 click
})
</script>
②clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
<script>
const div=document.querySelector('div')
div.addEventListener('click',function (event) {
console.log(event.clientX,event.clientY);
})//返回鼠标座标 页面的左上角为参照物
</script>
③offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
<script>
const div=document.querySelector('div')
div.addEventListener('click',function (event) {
console.log(event.offsetX,event.offsetY);
})//返回鼠标坐标 参照物是当前元素的左上角
</script>
④key 用户按下的键盘键的值 （现在不提倡使用keyCode）
<script>
document.body.addEventListener('keydown',function (event) {
console.log(event);当下按下的按键
})
</script>
事件流
一、事件流与两个阶段说明
1.事件流指的是事件完整执行过程中的流动路径
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段 简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父（默认false）
2.事件捕获概念： ①从DOM的根元素开始去执行对应的事件 (从外到里) ②事件捕获需要写对应代码才能看到效果
DOM.addEventListener('事件类型','事件处理函数','是否使用捕获机制')
③说明： addEventListener第三个参数传入true代表是捕获阶段触发（很少使用） 若传入false代表冒泡阶段触发，默认就是false 若是用 L0 事件监听，则只有冒泡阶段，没有捕获
3.若想把事件就限制在当前元素内，就需要阻止事件流动
event.stopPropagation()
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
3.阻止标签的默认行为
event.preventDefault()
form表单中button点击刷新行为: ①阻止默认行为 - form表单 有一个 submit 事件 理解提交表单的触发-点击按钮的时候触发 ②给button按钮绑定点击事件 也去阻止试试 ③ 给button按钮 添加一个 type="button" 属性 ④换成 input标签 type="button" ⑤把button 移出form表单的区域
4.阻止鼠标右键菜单弹出（body:100vh,body要有高度）
document.body.addEventListener('contextmenu',function (event) {
event.preventDefault()
})
事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧 总结： 优点：给父级元素加事件（可以提高性能） 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发 实现：事件对象.target 可以获得真正触发事件的元素
// 事件委托
const ul=document.querySelector("ul");
ul.addEventListener("click",function (event) {
// event.target 有可能是ul标签，有可能是li标签，还有可能是 a标签
event.target.style.backgroundColor="red";
// event.target 你当前点击的是哪个标签（点击最深最底层的那个标签即可）
// console.log(event.target);// 获取到被点击的li标签
})
补充
事件绑定-取消绑定
<body>
<button>点我试试</button>
<script>
const btn=document.querySelector('button')
// 普通函数
function func() {
console.log('123');
}
// 绑定事件
btn.addEventListener('click',func)
setTimeout(function () {
// 取消这个事件绑定
btn.removeEventListener('click',func)
},5000)
</script>
</body>
<body>
<script>
// 普通函数
function func() {
console.log('123');
}
function func2() {
console.log('456');
}
// 可以绑定多个事件
btn.addEventListener('click',func)
btn.addEventListener('click',func2)
</script>
</body>
