javascript基础（11)--事件对象

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。

window.onload = function(){
		/*
		 * 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
		 */
		//获取两个div
		var areaDiv = document.getElementById("areaDiv");
		var showMsg = document.getElementById("showMsg");
		
		/*
		 * onmousemove
		 * 	- 该事件将会在鼠标在元素中移动时被触发
		 * 
		 * 事件对象
		 * 	- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
		 * 		在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。
		 */
		areaDiv.onmousemove = function(event){
			
			/*
			 * 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
			 * 	在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
			 */
			/*if(!event){点
				event = window.event;
			}*/
			
			//解决事件对象的兼容性问题
			event = event || window.event;
			
			/*
			 * clientX可以获取鼠标指针的水平坐标
			 * cilentY可以获取鼠标指针的垂直坐标
			 */
			var x =  .clientX;
			var y = event.clientY;
			
			//alert("x = "+x + " , y = "+y);
			
			//在showMsg中显示鼠标的坐标
			showMsg.innerHTML = "x = "+x + " , y = "+y;
			
		};
		
	};

事件的冒泡（Bubble）

所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡。

取消冒泡：可以将事件对象的cancelBubble设置为true，即可取消冒泡。

event.cancelBubble = true;

事件的委派：

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件.事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能.

				//为ul绑定一个单击响应函数
				u1.onclick = function(event){
					event = event || window.event;
					/*
					 * target
					 * 	- event中的target表示的触发事件的对象
					 */
					//alert(event.target);
					//如果触发事件的对象是我们期望的元素，则执行否则不执行
					if(event.target.className == "link"){
						alert("我是ul的单击响应函数");
					}
					
				};

时间绑定：    
 1. 使用 对象.事件 = 函数 的形式绑定响应函数，

 它只能同时为一个元素的一个事件绑定一个响应函数，  不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的。

 2. addEventListener()
 

				/*
				 * addEventListener()
				 * 	- 通过这个方法也可以为元素绑定响应函数
				 *  - 参数：
				 * 		1.事件的字符串，不要on
				 * 		2.回调函数，当事件触发时该函数会被调用
				 * 		3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
				 * 
				 * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
				 * 	这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
				 * 
				 * 这个方法不支持IE8及以下的浏览器
				 */
				/*btn01.addEventListener("click",function(){
					alert(1);
				},false);
				
				btn01.addEventListener("click",function(){
					alert(2);
				},false);

attachEvent()：

				
				/*
				 * attachEvent()
				 * 	- 在IE8中可以使用attachEvent()来绑定事件
				 *  - 参数：
				 * 		1.事件的字符串，要on
				 * 		2.回调函数
				 * 
				 *  - 这个方法也可以同时为一个事件绑定多个处理函数，
				 * 		不同的是它是后绑定先执行，执行顺序和addEventListener()相反
				 */
				/*btn01.attachEvent("onclick",function(){
					alert(1);
				});
				
				btn01.attachEvent("onclick",function(){
					alert(2);
				});

封装bind()函数，统一处理

			 * 参数：
			 * 	obj 要绑定事件的对象
			 * 	eventStr 事件的字符串(不要on)
			 *  callback 回调函数
			 */
			function bind(obj , eventStr , callback){
				if(obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr , callback , false);
				}else{
					/*
					 * this是谁由调用方式决定
					 * callback.call(obj)
					 */
					//IE8及以下
					obj.attachEvent("on"+eventStr , function(){
						//在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
			}

事件的传播：

关于事件的传播网景公司和微软公司有不同的理解:

 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，

 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。

网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素.

 W3C综合了两个公司的方案，将事件传播分成了三个阶段:

1.捕获阶段

 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件

2.目标阶段

事件捕获到目标元素，捕获结束开始在目标元素上触发事件

 3.冒泡阶段

事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件,如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true,一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false, iE8及以下的浏览器中没有捕获阶段

拖拽：

拖拽的流程：

1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown

2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove

3.当鼠标松开时，被拖拽元素固定在当前位置  onmouseup

                //获取box1
				var box1 = document.getElementById("box1");
				//为box1绑定一个鼠标按下事件
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				box1.onmousedown = function(event){
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						box1.style.left = left+"px";
						box1.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
					};
				};

 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为，但是这招对IE8不起作用。

鼠标滚轮滚动的事件：

绑定一个鼠标滚轮滚动的事件， onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性， 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件， 注意该事件需要通过addEventListener()函数来绑定。

					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚 120   向下滚 -120
					//wheelDelta这个值我们不看大小，只看正负
					
					//alert(event.wheelDelta);
					
					//wheelDelta这个属性火狐中不支持
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚 -3  向下滚 3
					//alert(event.detail);

注意：使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false。需要使用event来取消默认行为event.preventDefault();但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错event.preventDefault && event.preventDefault();当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为。

 键盘事件：

onkeydown按键被按下

对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发

当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快

 这种设计是为了防止误操作的发生。

onkeyup按键被松开

 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

	
					/*
					 * 可以通过keyCode来获取按键的编码
					 * 	通过它可以判断哪个按键被按下
					 * 除了keyCode，事件对象中还提供了几个属性
					 * 	altKey
					 * 	ctrlKey
					 * 	shiftKey
					 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
					 * 			如果按下则返回true，否则返回false
					 */
					
					//console.log(event.keyCode);
					
					//判断一个y是否被按下
					//判断y和ctrl是否同时被按下
					if(event.keyCode === 89 && event.ctrlKey){
						console.log("ctrl和y都被按下了");
					}