一、事件对象event

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

window.onload=function(){
    
    
				
			//当鼠标在areaDiv中移动时，在showMsg中来显示坐标	
				var areaDiv=document.getElementById("areaDiv");
				var showMsg=document.getElementById("showMsg");
			//onmousemove:该事件将会在鼠标元素中移动时被触发
			areaDiv.onmousemove=function(event){
    
    
				
				//解决浏览器兼容的问题
				if(!event){
    
    
				event=window.event;
				}
				//event=event||window.event;
				
				//clientX可以获取鼠标指针的水平坐标
				//clientY可以获取鼠标指针的垂直坐标
				var x=event.clientX;
				var y=event.clientY;
			   //在showMsg中显示鼠标的坐标
			   showMsg.innerHTML="x="+x+",y="+y;
			}
			}

在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的。

二、使div可以跟随鼠标移动

1.首先在样式表中设置div的样式时，一定要开启绝对定位
在这里插入图片描述

2. clientX和clientY用于获取鼠标在当前的可见窗口的坐标，div的偏移量是相当于整个页面的。
3. pageX和pageY可以获取鼠标相当于当前整个页面的坐标，但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用该方式

4.将页面滚动条滚动的距离加给div的偏移量，这样div就会一直随鼠标移动

var st=document.documentElement.scrollTop;
var sl=document.documentElement.scrollLeft;
box1.style.top=top+st+"px";
box1.style.Left=Left+sl+"px";

三、事件的冒泡 Bubble

事件的冒泡：所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
如果不希望事件冒泡可以通过事件对象来取消冒泡。

//可以将事件对象中的cancelBubble设置为true，即可取消冒泡。
event.cancelBubble=true;

四、事件的委派

如果希望一次绑定事件，即可应用到多个的元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同祖先元素。

//为ul绑定一个单击响应函数
ul.onclick=function(event){
    
    

//target： event中的target表示的是触发事件的对象

//如果触发事件的对象是我们期望的元素，则执行，否则就不执行
  if(event.target.className=="link"){
    
    
   alert("我是ul的单击响应函数");
}
}

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

五、事件的绑定

使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖前边。
addEventListener()： 通过这个方法也可以为元素绑定响应函数
参数：
①事件的字符串，不要on
②回调函数，当事件触发时该函数会被调用
③是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数绑定的顺序执行。
这个方法不支持IE8及以下的浏览器，IE8支持attachEvent()
attachEvent(): 在IE8中可以使用attachEvent()来绑定事件
参数：
①事件的字符串，要on
②回调函数，当事件触发时该函数会被调用
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它后绑定的先执行，执行顺序和addEventListener()相反。
定义一个函数，用来为指定元素绑定响应函数：
参数：
①obj 要绑定事件的对象
②eventStr 事件的字符串(不要on）
③callback 回调函数

addEventListener()中的this，是绑定事件的对象
attachEvent()中的this，是window
需要统一两个方法的this

function bind(obj,eventStr,callback){
    
    

if(obj.addEventListener){
    
    
      //大部分浏览器兼容的方式
   obj.addEventListener(eventStr,callback,false);
}else{
    
    


     //IE8及以下
   obj.attachEvent("on"+eventStr,function(){
    
    
      //在匿名函数中调用回调函数
      //this是谁由调用方式决定
      callback.call(obj);
      });
}
 
}
bind(btn01,"click",function(){
    
    
 alert(1);
})

六、事件的传播

在这里插入图片描述

IE8及以下浏览器中没有捕获阶段。

七、拖拽练习

window.onload=function(){
    
    
/* 
拖拽box1元素
拖拽的流程：
1.当鼠标在被拖拽元素上按下时，可以开始进行拖拽 onmousedown
 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
 */
//获取box1
var box1=document.getElementById("box1");
 //1.当鼠标在被拖拽元素上按下时，可以开始进行拖拽 onmousedown
box1.onmousedown=function(event){
    
    
 //2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
  event=event || window.event;
//div的左偏移量 鼠标.clentX -元素.offsetLeft
 var ol=event.clientX - box1.offsetLeft;
				
//div的上偏移量 鼠标.clentY -元素.offsetTop
	 var ot=event.clientY - box1.offsetTop;
				  
document.onmousemove=function(event){
    
    
					//解决兼容问题
					event=event || window.event;
					//获取到鼠标的坐标
					var left=event.clientX - ol;
					var top=event.clientY - ot;
					//设置div的偏移量
					var st=document.documentElement.scrollTop;
					var sl=document.documentElement.scrollLeft;
					box1.style.top=top+st+"px";
					box1.style.left=left+sl+"px";
				};
				 //3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
			    document.onmouseup=function(){
    
    
					//取消document.onmousemove事件
					document.onmousemove=null;
					//取消document.onmouseup事件
					document.onmouseup=null;	
				};
				/* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索
				 引擎中搜索内容，此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
				 如果不希望发生这个行为，则可以通过return false来取消默认行为*/
			return false;
			};
			}

在这里插入图片描述
八、滚轮练习

window.onload=function(){
    
    
				/* 当鼠标向下滚动时候，box1变长，向上滚动时，box1变短 */
				var box1=document.getElementById("box1");
				//为box1绑定一个鼠标滚轮滚动的事件
				//onmousewheel鼠标滚轮滚动的事件,会在滚轮滚动时触发,但是火狐不支持该属性
				/* 
				 在火狐中需要使用DOMMouseScroll 来绑定滚动事件
				 注意该事件需要通过addEventListener()函数来绑定
				 */
				box1.onmousewheel=function(event){
    
    
					//event=event || window.event;
					
					//判断鼠标滚轮滚动的方向
					
					//event.wheelDelta可以获取鼠标滚轮滚动的方向
					//向上滚120，向下滚-120，wheelDelta这个不看大小，只看正负
					//alert(event.wheelDelta);
					
					//火狐不支持wheelDelta
					//alert(event.detail);
					if(event.wheelDelta>0 || event.detail<0){
    
    
						//向上滚，box1变短
						box1.style.height=box1.clientHeight-10+"px";
					}else{
    
    
						//向下滚，box1边长
						box1.style.height=box1.clientHeight+10+"px";
					}
					/* 
					当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
					 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
					 */
					
					/* 
					 使用addEventListener()方法绑定响应函数的，取消默认方式不能使用 return false
					 需要使用event取消默认行为,event.preventDefault()
					 但是IE8不支持event.preventDefault()，直接调用会报错
					 */
					event.preventDefault() && event.preventDefault();
					
					return false;
					
				}
				
			bind(box1,"DOMMouseScroll",box1.onmousewheel);
				
			 function bind(obj,eventStr,callback){
    
    
				
				if(obj.addEventListener){
    
    
				      //大部分浏览器兼容的方式
				   obj.addEventListener(eventStr,callback,false);
				}else{
    
    
				//IE8及以下
				   obj.attachEvent("on"+eventStr,function(){
    
    
				      //在匿名函数中调用回调函数
				      //this是谁由调用方式决定
				      callback.call(obj);
				      });
				}
				 
				}
				 
			}

八、键盘事件

1.onkeydown ：按键被按下
对于onkeydown来说，一直按着某个键不松手，则事件会一直触发
当onkeydown连续触发时第一次和第二次会间隔一下，后面就很快，这种设计是为了防止误操作。

2.onkeyup ：按键被松开
3.键盘事件一般都会绑定给一些可以获取到焦点的对象或者document

4.可以通过keyCode来获取按键的编码，可以通过它来判断哪个键被按下

if(event.keyCode===89){
    
    
console.log("y被按下了");
}

5.除了keyCode，事件对象还提供了几个属性
①altKey
②ctrlKey
③shiftKey
这三个用来判断alt、ctrl、shift是否被按下，如果按下则返回true，否则返回false
在这里插入图片描述

JS学习笔记-事件