一 .事件对象(实现事件委托之前必须了解什么是事件对象)

1.什么是事件对象?

事件对象也是对象,这个对象存放了事件触发时的一些相关信息,比如鼠标点击了哪个位置里面就存着鼠标点击的位置

2.如何获取事件对象

在事件绑定的回调函数的第一个参数就是事件对象,一般命名为even,ev,e

元素.addEventListener('click',function(e){}) //这里的e就是事件对象

二.事件对象的常用属性

• type //获取当前事件的事件类型

• clientX/clientY //获取鼠标相对于浏览器可见窗口左上角的位置

• offsetX / offsetY //获取鼠标相对于当前DOM元素的左上角的位置

• screenX/Y //获取鼠标距离浏览器的titie距离

• key 用户按下的键盘键的值,现在不提倡用keyCode了

• 这些属性在控制台输出当前事件的时候就能看到相关的属性值

写法都是: console.log(e.clientx); 用来获取

三. 事件委托

优点：给父级元素加事件（可以提高性能）

原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发

实现：e.target可以获得真正触发事件的元素;

• e.target.localName('')可以获取当前点击的名字

• e.target.className('类名,不用加.')可以获取e的类名

• e.target.nodeName('这里是大写')可以获取标签名

四.定时器-延时函数(只执行一次)

JavaScript 内置的一个用来让代码延迟执行的函数延时函数setTimeout

创建延时定时器

语法:setTimeout(funcument(){函数体},等待的毫秒数)

清除延时定时器

let timer=setTimeout(回调函数,等待的毫秒数) clearTimeout(timer)

五.本地存储

1、数据存储在用户浏览器中,设置、读取方便、甚至页面刷新不丢失数据,容量较大

2.localStorage: 生命周期永久生效，除非手动删除, 否则关闭页面也会存在,可以多窗口（页面）共享（同一浏览器可以共享),以键值对的形式存储使用

• 存储数据写法: localStorage.setItem( 'key' ,value)

• 获取数据写法: localStorage.getItem('key')

• 删除数据:localStorage.removeItem('key')

• 删除所有数据:localStorage.clear()

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

1.JSON.stringify(复杂数据类型) ; //将复杂数据转换成JSON字符串,存储 本地存储中

2.JSON.parse(JSON字符串) ; //将JSON字符串转换成对象, 取出 时候使用