JS（21）触屏事件，localStorage，sessionStorage等

1.常见的触屏事件

触屏事件	说明
touchstart	手指触摸到一个Dom元素时触发
touchmove	手指在一个Dom元素上滑动时触发
touchend	手指从一个Dom元素上移开时触发

2.触摸事件对象（TouchEvent）

– TouchEvent 是一类描述手指在（触摸屏）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动和触点的增加和减少。

2.1.常见的对象列表

触摸列表	说明
touches	正在触摸屏幕的所有手指列表
targetTouches	正在触摸当前Dom元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无

因为都是给元素注册触摸事件，所以重点是 targetTouches

3.classList属性

H5新增的一个属性，返回元素的类名

该属性用于在元素添加，移除及切换css类

1.添加类： element.classList.add('类名')
	举个🌰：focus.classList.add('current')
2.移除类：element.classList.remove('类名')
	举个🌰：focus.classList.remove('current')
3.切换类：element.classList.toggle('类名')
	举个🌰：focus.classList.toggle('current')

4.click延时解决方案

– 移动端 click 事件会有300ms的延时，原因是移动端屏 幕双击会缩放（double tap to 200m）页面

解决方案：
	1.禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。
		<meta name='viewport' content='user-scalable=no'>	
	2.使用插件。fastclick 插件解决300ms延迟

5.本地存储(window.localStorage)

5.1.本地存储的特性

1.数据存储在用户浏览器中
2.设置、读取方便，甚至页面刷新不丢失数据
3.容量较大，sessionStorage 约5m、localStorage 约20m
4.只能存储字符串，可以将对象 JSON.stringify()编码后存储。

1.声明周期永久性生效，除非手动删除，否则页面关闭也会存在
2.可以多窗口（页面）共享（同一浏览器可以共享）
3.以键值对的形式存储使用
存储数据：localStorage.setItem(key,value)
获取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key)
清空数据：（所有都清除掉）localStorage.clear()

6.window.sessionStorage（会话存储）

1.生命周期为关闭浏览器窗口
2.在同一个窗口（页面）下数据可以共享
3.以键值对的形式存储
存储数据：sessionStorage.setItem(key,value)
获取数据：sessionStorage.getItem(key)
删除数据：sessionStorage.removeItem(key)
清空数据：（所有都清除掉）sessionStorage.clear()

7.补充

框架：大而全，一整套解决方案
插件：小而专一，某个功能的解决方案