js基础 事件，事件冒泡,事件对象

接触过的事件
	click(单击) scroll(滚动) change(改变) load(加载)
	事件的分类
	1.鼠标事件
	2.键盘事件
	3.其他事件(触摸事件，input事件)
	
	事件的绑定方式
	1.行间绑定(几乎不用)
	2.js绑定(on+事件名)
	
	
	事件绑定，只能绑定一个执行方法，如果绑定多个，那么后面
	的会覆盖前面的
	
	取消事件：
	1.通过给事件绑定赋值null，来取消事件绑定
	2.如果通过on绑定的事件，直接在函数的最后添加 return false
eturn false 在高版本浏览器可用于取消默认事件
    3.如果是通过addEventListener方法绑定的事件，return false
    不能取消默认,
    通过事件对象的 event.preventDefault() 方法来取消默认事件
    4.阻止事件冒泡，使用事件对象的 event.stopPropagation() 方
    法.(事件后边的函数要有一个event变量，通过它来绑定此事件)

事件冒泡

事件分发分三个阶段，事件捕获阶段，目标阶段，
事件冒泡阶段（从内到外）

什么是事件冒泡

1.点击区域有多个元素
2.这些元素都对该事件进行了绑定操作
3.这些元素呈现父子级关系

事件冒泡
最内层的元素最先开始，执行事件绑定的函数，执行完毕以后，冒泡到
父级上，查看父级有没有对该事件进行绑定，如果有，就执行父级上绑定
的函数，并且向祖父级冒泡，依次往上冒泡，直到冒泡的终止位置，
终止位置是document

阻止事件冒泡，
标准：使用事件对象的 event.stopPropagation() 方法
ie:attachEvent方法进行事件监听,event.cancelBubble = true来阻止事件

 function $(ele){
	   return document.querySelector(ele);
   }
 
   $('.wp').onclick = function(){
	   console.log('祖父级1');
   };
   $('.far').onclick = function(){
   	   console.log('父级1');
   }; 
   $('.son').onclick = function(event){
   	   console.log('子级1');
	   event.stopPropagation();
	   //return false;
   };
   document.onclick = function(){
    	console.log('document1');
    };

事件委托：
事件冒泡过程中，从子级到document，即使中间的父级元素没有事件发生，祖父级元素有事件，依然能够传递到document。
条件：存在冒泡。
正常情况，如果需要给同级元素都动态添加事件需要一个个添加事件，这个时候给他的父级、祖级添加事件函数，内部通过标准event.target（IE浏览器用event.srcElement）得到事件发生的子元素，实现事件委托。
好处：新增的元素不用再去设置事件监听，减少事件监听的数量（n==1）

事件捕获

只有通过addEventListener(event,fn,true)才能使事件在捕获阶段执行
从document 一直捕获的事件触发的那个元素上

1.IE8及其以下只有事件冒泡阶段，没有捕获阶段
2.大部分事件都是在冒泡阶段执行，捕获很少使用
3.凡是使用on绑定的事件，都是在冒泡阶段执行	

事件对象

每个事件都有一个事件对象，而且我们可以在绑定事件的执行函数当中获取这个对象，
该对象是一个默认参数，名称随意；也可以使用 event 全局变量来替代所命名的参数，
低版本火狐浏览器不支持evnet，可以通过 参数来设置 假如参数是ev
	var ev = event||ev；这样可以兼容低版本火狐
	
	事件对象的作用
	1. 获取事件源对象 (当前事件是哪一个对象绑定的)
	2. 获取该事件的触发点 ( 当前事件触发时候的坐标 )
	3. 可以结合鼠标和键盘，获取到当前事件是哪一个键触发的

   事件源对象
   真正触发事件的对象
   在标准浏览器中，使用 target 来获取 事件源对象
   在IE8及其以下，通知 srcElement 来获取 事件源对象
   谷歌都支持

   事件源对象
   真正触发事件的对象
   在标准浏览器中，使用 target 来获取 事件源对象
   在IE8及其以下，通知 srcElement 来获取 事件源对象
   谷歌都支持

for(var i=0;i<lis.length;i++){
	   lis[i].onclick = function(){
		   console.log( event.target || event.srcElement );
	   };
   }


clientX，clientY
   clientX: 当前触发点到浏览器左边的距离
   clientY: 当前触发点到浏览器顶部的距离
   兼容性很好，所有浏览器表现一致
   
   screenX,screenY
   screenX: 当前触发点到屏幕(显示器)左边的距离
   screenY: 当前触发点到屏幕(显示器)顶部的距离
   兼容性很好，所有浏览器表现一致
   
   pageX pageY
   pageX: 当前触发点到页面左边的距离
   pageY: 当前触发点到页面顶部的距离
   ie8及其以下浏览器不兼容
   
   ie8的兼容写法
   pageY = event.clientY + document.documentElement.scrollTop

  layerX,layerY
  offsetX，offsetY
  x,y
  不考虑使用，要么不兼容，要么不同浏览器的不同版本不兼容，因此不考虑使用

鼠标和键盘的事件对象

button
	0 鼠标左键  1 中间滚轮 2 右键
which
	1 鼠标左键  2 中间滚轮 3 右键
ex: event.button,event.which



键盘
	altKey 
	ctrlKey
	shiftKey
	metaKey ：系统键 
	keyCode || which 当前按键的值，也就是字符的编码值
	keydown 和 keypress事件中，keyCode 或者 which 值不太一样，
	(一般用keydown获取kewcode)keydown显示的是按键字符编码(大写)，
	keypress获取的是输入字母的ascII字符编码
	
	常见的keyCode
	空格 32
	enter 13
	left 37
	up 38
	right 39
	bottom 40

注：事件对象，事件源、事件流（也就是事件的冒泡或者捕获）
1.事件响应函数里的this指代事件对象，但是事件响应函数内部的函数的this不会指代事件对象，返回undefined,除非使用闭包。
2.事件对象如果有嵌套关系，想要获取内部具体元素节点，需要获取事件源，即：
标准下：event.target || event.srcElement
IE下：.event.srcElement

事件机制

鼠标点击事件

1.mousedown 鼠标按下去的事件

特点：
无论鼠标的哪一个键按下都会触发（按下左键，右键，滚轮）

2.mouseup 鼠标抬起来的事件

3.click 鼠标单击事件

执行顺序
mousedown -> mouseup -> click

4.鼠标移动事件

mousemove

鼠标移入移出事件
mouseenter - mouseleave
mouserover - mouseout

  1.同时绑定它们四个事件，首先执行 mouserover - mouseout，
  然后执行mouseenter - mouseleave
  2. mouseenter - mouseleave没有事件冒泡，
  mouserover - mouseout有事件冒泡

4.鼠标单击右键

contextmenu

5.鼠标双击事件

dblclick

	1.双击的时候，首先执行单击，再执行双击
    2.两者都会执行

鼠标滚动事件

1.onmouseWheel (标准，ie)(快弃用了)

onmouseScroll(谷歌)

	鼠标滚轮事件
	火狐下面
	DOMMouseScroll 事件，并且事件绑定必须使用addEventListener，通过事件对象的detail属性，
	来判断滚轮移动的方向
	detail<0 滚轮向前
	detail>0 滚轮向后
	
	谷歌下面
	mousewheel 事件，绑定的时候可以使用on,也可以使用addEventListener,通过事件对象的wheelDelta
	属性，来判断滚轮移动的方向
	wheelDelta>0 滚轮向前
	wheelDelta<0 滚轮向后
ex:
 document.onmousewheel = function(){
   	   console.log(event.wheelDelta,event.detail);
   };
   // 火狐
   document.addEventListener('DOMMouseScroll',function(ev){
	   var ev = event||ev;
	    console.log(ev.detail);
   });



// 兼容写法
   function addMousewheel(obj){
	   if(!obj){
		   return ;
	   }
	   //火狐
	   obj.addEventListener('DOMMouseScroll',scroll);
	   //谷歌
	   obj.onmousewheel = scroll;
	   
	   //公共方法
	   var dir;
	   function scroll(ev){
		   var ev = event||ev;
		   
		   if(ev.wheelDelta){ //谷歌
			   dir = ev.wheelDelta>0?true:false;
		   }else{ // 火狐
			   dir = ev.detail>0?false:true;
		   }
		   
		   if(dir){
		   	 console.log('向前滚动');
		   }else{
		   	 console.log('向后滚动');
		   }
	   }
   }
   
   var wp2 = document.querySelector('.wp2');
   addMousewheel(wp2);

2.onwheel

onwheel 通常用于处理滑轮的滚动事件()(新版本各浏览器都支持)

3.onscroll

onwheel是鼠标滚轮旋转, 而onscroll 处理的是对象内部内容区的滚动事件。

键盘点击事件

我们一般对能够获取焦点的元素绑定绑定键盘事件(select,input,textarea,document)
键盘事件

1.keydown 键按下去的事件

特性：当按下去不放的时候，该事件会一直触发

2. keypress

输入型的键按下去的时候触发该事件
eg：alt shift ctrl 等都不是输入型的键

3.keyup 按键抬起来的时候触发

和keydown一样，所有键都可以触发

表单中常用的事件

1.focus 当元素获取焦点的时候触发的事件(聚焦)

2.blur 当元素失去焦点的时候触发的事件(失焦)

以上两个事件，在ie中可以给所有的元素绑定，当然也有不能绑定的元素，比如 br，script 等等

txt.onblur = function(){
   	   this.style.borderColor = '#ccc';
   	   this.style.width = '200px';
   };

3.change：当表单元素的内容发生改变的时候触发

4.input: 当表单元素输入的时候触发，IE8及其以下不支持该事件(输入内容时一直在变化)

 var aa = document.getElementById("aa");
  aa.onchange = function(){
	  console.log(this.value);
  };
  aa.oninput = function(){
  	  console.log(this.value);
  };

移动端事件

1. touchstart

   开始触摸的时候触发

2. touchmove

	手指移动的时候触发

3. touchend

	手指抬起的时候触发
移动端也支持click，但是会有延迟，给用户卡顿的感觉，一般不推荐使用

事件绑定

1.on 绑定
2.addEventListener 绑定

touch 事件也有事件冒泡

移动事件对象

1.touches 触摸点的集合，他是一个数组
2.targetTouches 事件源对象上触摸点的集合
3.changedTouches 当前状态距离上一次状态，变化点的集合

常用触摸点属性

1.clientX 距离浏览器左边的距离
  clientY 距离浏览器上边的距离
  
2.pageX 距离页面左边的距离
  pageY 距离页面上边的距离
  
3.screenX 距离手机屏幕左边的距离
  screenY 距离手机屏幕上边的距离

 wp.ontouchmove = function(){
   	   // console.log(event.changedTouches);
   	   this.innerHTML = '触摸中';
    console.log(event.touches[0].clientX,event.touches[0].pageX,
  event.touches[0].screenX);
   };

硬件劫持事件

1.只能移动触发
2.都是window的事件，只能在window绑定

1.屏幕旋转方向改变事件
	orientationchange
	
	2.陀螺仪(重力感应事件)
	devicemotion
	
	3.磁力感应事件
	deviceorientation

横竖屏
window.onorientationchange = function () {
		var str;
		// window.orientation 获取屏幕的选装角度
		switch (window.orientation) {
			case 0:
				str = '竖屏';
				break;
			case 90:
				str = '向左旋转';
				break;
			case -90:
				str = '向右旋转';
				break;
			default:
				str = '没有旋转';
				break;
		}

		document.querySelector('.wp').innerHTML = str;
	};

摇一摇
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>摇一摇</title>
		<style type="text/css">
			* {
				margin: 0;
				padding:0;
			}
			#show {
				width:100%;
			}
		</style>
	</head>
	<body>
		<img id="show" src="../images/1.jpg" />
	</body>
</html>
<script type="text/javascript">
	var show = document.getElementById("show");
	
	var sObj = {x:0,y:0,z:0};
	var prevObj = {x:0,y:0,z:0};
	var prevTime = 0;
	
	// window.ondevicemotion = 
	window.addEventListener('devicemotion',yao);
	
	function yao(){
		//重力加速度对象
		var acc = event.accelerationIncludingGravity;
		
		// document.body.innerHTML = 'x:'+acc.x+'<br/>y:'+acc.y+'<br/>z:'+acc.z;
		var date = new Date();
		
		if(date.getTime()-prevTime>500){
			//把当前的重力加速度的属性存放到sObj
			sObj.x = acc.x;
			sObj.y = acc.y;
			sObj.z = acc.z;
			
			if(sObj.x-prevObj.x>50||sObj.y-prevObj.y>50||sObj.z-prevObj.z>50){
				var num = Math.floor(Math.random()*4+1);
				show.src = '../images/'+num+'.jpg';
			}
			prevObj.x = sObj.x;
			prevObj.y = sObj.y;
			prevObj.z = sObj.z;
		}
	};
</script>

检查设备方向
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>检查设备</title>
		<style type="text/css">
			* {
				margin:0;
				padding:0;
			}
			.wp {
				width:200px;
				height: 200px;
				background:#04BE02;
				color:#ff0;
				font-size:50px;
			}
		</style>
	</head>
	<body>
		<div class="wp" id="alpha"></div>
		<div class="wp" id="beta"></div>
		<div class="wp" id="gamma"></div>
	</body>
</html>
<script type="text/javascript">
	
	/*
	deviceorientation事件的属性
	alpha 表示设备Z轴方向上的旋转角度，范围是 0-360
	beta 表示设备X轴方向上的旋转角度,范围是 -180-180,表示设备由前向后的旋转角度
	gamma 表示设备Y轴方向上的旋转角度,范围是 -90-90 表示设备由左向右的旋转角度
	*/ 
	
	
	var a = document.getElementById("alpha");
	var b = document.getElementById("beta");
	var g = document.getElementById("gamma");
	
	
	//首先检查手机是否支持deviceorientation事件
	if(window.DeviceOrientationEvent){
		window.addEventListener('deviceorientation',function(){
			a.innerHTML = 'Z轴旋转角度'+event.alpha;
			b.innerHTML = 'X轴旋转角度'+event.beta;
			g.innerHTML = 'Y轴旋转角度'+event.gamma;
		});
	}else{
		document.body.innerHTML = '设备不支持';
	}
</script>