JavaScript事件对象中Event属性的简单使用

Event属性可以帮到你!!!

开发工具与关键技术：DreamWeaver     Event属性 
作者:听民谣的老猫
撰写时间：2019/1/16 15:30

在JavaScript学习过程中接触到的Event属性，在后期学习中对Event属性的简单使用和理解
你在前端学习过程中有想过鼠标点哪里某个div或者某张图片就出现在哪里，某个div或者某张图片跟着鼠标移动，通过按下某个键盘来达到你的某个想法???

Event属性可以帮到你!!!
每一个事件的触发会产生相应的事件对象（事件对象只有在事件发生时才会产生，手动创建是不存在的! ），Event属性。Event属性的作用是用来记录事件发生产生的一些相关信息。

那如何访问到Event属性?

         <script>
	          window.onclick=function(e）
	          {
		         var e = event||window.event;(定义一个变量来获取事件对象，解决兼容性问题)
		         console.log(e);
	          };
         </script>
         

如上代码，构建onclick事件，通过console.log()访问到onclick事件中相应Event属性值。（注意在事件函数外面是访问不到事件产生的Event属性值的） 在每一次触发事件都会产生相应Event属性值。

上面的图片就是通过console.log()访问到onclick事件中相应Event属性值，这些属性值包括事件被触发时，鼠标指针的垂直和水平坐标(clientY，clientX)。某个键盘按键被按下(onkeydown)…

合理的运用这些属性就可以简单实现你的一些小想法!!!

        <div class="box" id="box"></div>
        <script>
	         var box= document.getElementById("box");
	         window.onclick=function(e)
	         {
		     var e = event||window.event;
		     box.style.top=parseInt(e.clientY)-150+"px";
		     box.style.left=parseInt(e.clientX)-150+"px"
         	};
     <-几行简单的代码就可以实现鼠标点哪div就在哪，试试?->
</script>

下面为各位看官奉上每个属性的描述:

属性	描述
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。
altKey	返回当事件被触发时，“ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，“CTRL” 键是否被按下。
metaKey	返回当事件被触发时，“meta” 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，“SHIFT” 键是否被按下。
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。