JS-鼠标、键盘事件及事件对象/event

事件对象/event

event包含了发生事件的所有信息内容，不如:发生事件类型，发生事件的元素，键盘按下状态等等

事件对象的创建，当事件发生时，游浏览器帮我们创建的,并通过参数的形式传递给事件处理程序的

事件获取方式

 //IE
 window.event;
 ​
 //非IE
     arguments[0];
 //事件处理程序的参数，第一个参数默认为event事件对象

事件属性

一个元素可以绑定多个事件

鼠标事件

鼠标事件	事件属性	鼠标事件	事件属性	鼠标事件	事件属性
鼠标单击	onclick	鼠标双击	ondblclick	鼠标移入	onmouseover
鼠标移出	onmouseout	鼠标进入	onmouseenter	鼠标离开	onmouseleave
鼠标按下	onmousedown	鼠标释放	onmouseup	鼠标移动	onmousemove

鼠标移入与移出:

元素的变动则执行，

从外部元素移入内部元素会触发内部移入与外部移入、移出。从内部元素移入外部元素会触发外部移入与内部移出。

鼠标进入与离开:

只针对元素包裹区域

从外部元素进入内部元素只会触发内部移入。从内部元素进入外部元素会触发内部离开。

鼠标点击

鼠标点击 = 鼠标按下 + 鼠标释放

鼠标移动

 idvObj.onmousemove = function(event){
     var eventObj = window.event||event[0];
     
     var cx = eventObj.clientX;
     var cy = eventObj.clientY;
     //获得客户区域X、Y坐标
     
     var sx = eventObj.screenX;
     var sy = eventObj.screenY;
     //获得鼠标相对屏幕的x和y 坐标
 }

鼠标属性/button

在三维场景中有时候需要判断鼠标的事件，除了使用的click事件，只有鼠标左键有效，而右键无效。而对于onmousedown、onmouseup的时候鼠标的事件左键/右键有效。以下数据为非ie浏览器

参数	描述
0	鼠标左键
1	鼠标中键
2	鼠标右键

 

键盘事件

键盘事件	键盘属性	键盘事件	键盘属性	键盘事件	键盘属性
键盘按下	onkeydown	键盘按下	onkeypress	键盘释放	onkeyup

onkeydown：所有件按下有效

onkeypress：特殊键(无键盘码的键)按下无效，只有字母字符键有效

事件对象的 altkey shiftkey ctrlkey

 // 事件对象的 altkey shiftkey ctrlkey
 ​
 document.onkeydown=function(event){
 let key_code =  event.keyCode;
     //先获得键盘码 (可以知道你按下了键盘的那个键)
 ​
 //判断是否按钮了shift键
 if(e.shiftKey){
 console.log("你按下了shift键");
 }
 ​
 //是否按钮了ctrl键
 if(e.ctrlKey){
 console.log("你按下了ctrl键");
 }
 ​
 ​
 //是否按钮了alt键
 if(e.altKey){
 console.log("你按下了alt键");
  }
 }