JS事件（01-04）

JS事件01
	事件类型
		PC端事件
			a.鼠标事件(mouse):鼠标按下/松开/点击/双击/移入/移出/右键/移动/拖拽/滚轮;
			b.键盘事件:按键按下/松开/按;
		移动端事件
			a.触摸事件:开始触摸,触摸移动,触摸结束;
			b.轻扫事件:左/右/上/下轻扫;
			c.捏合事件:双指捏合,三指捏合,多指捏合;
			d.手机横竖屏事件;
			e.手机摇一摇事件;
	鼠标事件
		添加鼠标事件的方式一：在JS中通过元素节点.on事件名
		添加鼠标事件的方式二：在body的标签属性中，直接调用在JS中定义的函数即可
		click 单击事件
		dblclick 双击事件 
		onmouseup 添加鼠标松开事件
		onmousedown 添加鼠标按下事件
	事件对象event
		任何事件在事件触发时都会产生一个事件对象 event
		var event = window.event || e;//事件对象的兼容
		clientX,clientY 当触发该事件时,触摸点的位置距离可视窗口的左边距和上边距
		offsetX,offsetY 当触发该事件时,触摸点距离该触发事件DOM元素对象的左边距和上边距
		pageX,pageY  当触发该事件时,触摸点距离body页面内容区域的左边距和上边距
		mousemove--鼠标移动事件,只要鼠标在事件对象中移动位置,立马触发;该方法会触发多次;
	JS中我的复制粘贴剪贴事件
		鼠标右键事件 contextmenu
		复制事件 copy
		粘贴事件 paste
		剪切事件 cut
		return false;//禁止系统默认事件
	form表单事件
		focus 聚焦事件,当输入框处于可编辑状态时触发
		blur 失焦事件,当输入框处于不可编辑状态时触发
		change 事件,两个条件:
	1.输入框内容相对于上一次发生了改变;
	2.输入框处于失焦;
		input 事件,只要输入框中的内容发生改变,就会触发
		submit 事件,提交按钮的事件--属于form表单事件，并不是input的submit的时间
	键盘事件
		keydown,keyup,keypress
	事件冒泡
		事件的执行:
	分为两步:
	1.事件检测(事件捕获):由大范围到小范围检测,直到检测到该事件为止;
	2.事件执行(事件冒泡):由该事件反向冒泡执行,只要具备该事件的对象都会执行;
	3.event.cancelBubble = true; 取消事件冒泡
	4.event.stopPropagation();取消事件冒泡的兼容
	5.event.preventDefault();禁止系统默认事件触发
	1.mouseover,mouseout 鼠标的移入移出
	2.mouseenter,mouseleave 鼠标的移入移出
	第二种方式的移入移出取消了事件冒泡;

字符串函数
	1.字符串函数 - 字符串是一个字符数组
	2.substr(start,length) 字符截取
	// 参数1:下标开始位置截取;
	// 参数2:截取到第二个参数length结束;
	// 如果第一个参数是负数,则代表倒着数,从第几个字符开始截取,截取length个长度;如果第二个参数不写,则截取到最后
	3.substring(start,end) 字符串截取
	// 参数1:下标开始位置截取，包含开始下标
	// 参数2:截取到该下标结束，不包含结束下标
	4.字符串分割
	// split(string,count) 将字符串分割成数组元素,string是分割符号,count是分割的个数,如果count省略,则以分割符号分割到字符串结束
	5.去除字符串中的首尾空格 trim()

JS事件03
	小游戏-飞翔的小鸟

JS事件02
	添加事件的方式
		1.on+事件类型的方式:多次为同一个元素节点添加同一个事件,越后添加的会覆盖前面的事件
	移出事件: 事件对象(元素节点对象).on+事件类型 = null
		2.事件监听的方式:多次为同一个元素节点添加同一个事件,都会触发,并不会覆盖
	添加事件: addEventListener
	移除事件: removeEventListener
			添加事件的方式二:事件监听的方式
	// 节点对象(事件对象).addEventListener(参数1,参数2,参数3)
	// 参数1:事件类型
	// 参数2:事件触发时的函数
	// 参数3:事件触发的时机和顺序,false代表事件冒泡中触发(从小范围到大范围执行),true代表在事件捕获过程中触发(从大范围到小范围执行)
	滚轮事件
		mousewheel 非火狐滚轮事件
		ev.wheelDelta<0  向下滚动
		// 火狐浏览器的滚轮事件,通过事件监听的方式添加  DOMMouseScroll
		document.addEventListener("DOMMouseScroll",function(e){
		console.log("Firefox");
		console.log(e.detail);
		if(e.detail>0){
			console.log("向下滚动！");
		}else{
			console.log("向上滚动！");
		}
	},false);
	浏览器嗅探
		window.navigator.userAgent 获取当前HTML文件运行在浏览器中的信息(浏览器名称及版本号) 通过Chrome/Firefox/Opera/Safari等关键字判断在哪个浏览器运行,从而做JS代码兼容

JS事件04
	本地数据存储的概念
		var a=80;//变量存储到内存中，一旦页面关闭，则销毁变量的内存空间，下次刷新或者重新打开页面，则无法获取此前的内存中的数据
		localStorage 本地数据持久化,使用键值对存储数据
， 数据并不在内存中,而是在浏览器本地中
	localStorage
		一.localStorage 本地数据持久化对象,通过键值对来存储数据;
	特点:  
	1.数据存储可以做到数据持久化;
	2.如何做增删改查,因为localStorage是一个对象,所以通过value来存值;
	3.value值的特征是一个字符串;不管存储的是不是字符串,自动转换为字符串;value值不能直接存储对象和数组,需要转化成JSON字符串;
	4.添加键值对的方式一:通过点语法 localStorage.键名(属性名)                                                            
    5.添加键值对的方式二:  [字符串],中括号可以吧字符串转换成JS可执行的代码部分，如：localStorage.sex = "man";     
    6.添加键值对的方式三：
           localStorage.setItem("key","value"); 
		二.如果本地需要存储对象和数组,处理方式
			var arrA=[45,90,true,"hello"];
			localStorage.arr = arrA;                          
       		//存储的并不是数组，数组不能直接存储 - 这是错误的
      
JSON格式由对象和数组嵌套组成的字符串,叫做JSON字符串
JSON对象:有数组及对象类型组成的集合类型,叫做JSON对象
JSON.stringify(a) 将a(JSON对象)转化成JSON字符串
JSON.parse(a) 将a(JSON字符串)转化成JSON对象

localStorage的删除的方式:
// 方式一:localStorage.removeItem("key");//删除此key对应的键值对
// 方式二:删除localStorage中的所有键值对
// localStorage.clear();

	sessionStorage：用于本地数据存储的一个对象,这些数据只有在同一个会话级页面中,才能被访问;并且页面关闭时,sessionStorage存储的数据会自动清除;所以sessionStorage并不能做数据持久化存储;一般用来做临时缓存；它的使用方式和localStorage一模一样,只是存储事件不一样。
	cookie
		1.cookie的作用
	HTTP协议是一个无状态协议,打开网页(一旦数据传输完成,客户端就会断开链接);再次网络请求时,会重新渲染(重新连接服务器)页面,为了方便,我们可以把客户端的信息(一般是账号,密码,用户信息等等),可以存储到cookie中,方便下次取值;
		2.cookie的原理:
	存储的是一段文本信息,和localStorage一样,通过name和value来存值;注意:cookie不是一个对象,而且也不是通过键值对来存值的;通过name=value存储;每个不同值之间,通过分号隔开,存储到浏览器中;
		3.cookie的特点:
	a.cookie存储的数据的大小(内存),不能超过4KB;
	b.存储的数据具有时效性,可以设置失效时间;
	c.使用文本存储;
		注意:同一个浏览器,一个网页的不同页面共用一个cookie
		添加cookie的方式一:document.cookie = "name=value"
		添加cookie的方式二: - 同时添加数据的失效时间expires=失效时间
		添加cookie的方式二:使用max-age设置失效时间，以秒为单位
		addBtn.onclick = function() {
				// 添加cookie的方式二:使用max-age设置失效时间，以秒为单位
				var t = 60 * 60 * 32;//60s * 60s * 32 代表一天32小时，实际失效时间以秒为单位，减去8个小时才是真正的失效时间；使用北京时间-东八区时间，此时是以0时区作为参考标准的；所以，设置失效时间要在此基础上加上8个小时
				document.cookie = "address=高新区东史马5号楼2单元5层55号;max-age=" + t;

}
		删除cookie         document.cookie = "name=;max-age=-1";