首页 > 编程笔记 > JavaScript笔记

JS事件对象（event）

事件对象用于描述所产生的事件。调用事件处理程序时，JS会把事件对象作为参数传给事件处理程序。事件对象提供了有关事件的详细信息，因而可以在事件处理程序中通过事件对象获取有关事件的相关信息，例如获取事件源的名称、键盘按键的状态、鼠标光标的位置、鼠标按钮的状态等信息。

需要注意的是，事件对象在不同浏览器中存在兼容问题：在 IE/Chrome，事件对象为 event 对象，为一个内置全局对象，而 event 对象在 Firefox 不存在这个对象，对 Firefox 需要使用一个局部变量来接收有关事件的相关信息。可见，在获取事件对象时需要进行兼容处理，具体做法请参见示例 1。

所有标准浏览器（包括 IE9、IE10、IE11、Chrome 和 Firefox），事件对象都是使用事件函数的第一个参数表示，有关事件的所有详细信息都将传入这个参数。由前面的描述可知，事件对象必须在一个事件调用的函数里面使用才有事件的相关信息。

事件对象包含的有关事件的所有信息以及事件具有的一些特性都是通过该对象的属性和方法来体现的，表 1 列出了事件对象的一些常用属性和方法。

表 1：事件对象的常用属性和方法
属性/方法	说明
altKey	用于判断键盘事件发生时“Alt”键是否被按下
button	用于判断鼠标事件发生时哪个鼠标键被点击了。在遵循 W3C 标准的浏览器中，鼠标左、中、右键分別用 0、1 和 2 表示；不遵循 W3C 标准的IE浏览器中，鼠标左、中、右键分别用 1、4 和 2 表示
clientX	用于获取鼠标事件发生时相对于可视窗口左上角的鼠标光标的水平坐标
clientY	用于获取鼠标事件发生时相对于可视窗口左上角的鼠标光标的垂直坐标
ctrlKey	用于判断键盘事件发生时“Ctrl”键是否被按下
keyCode	返回被按下的键盘按键对应的键码值
relatedTarget	用于获取鼠标事件发生时与事件源相关的节点
screenX	用于获取鼠标事件发生时相对于文档窗口的鼠标光标的水平坐标
screenY	用于获取鼠标事件发生时相对于文档窗口的鼠标光标的垂直坐标
shiftKey	用于判断键盘事件发生时“Shift”键是否被按下
offsetX	用于获取鼠标事件发生时相对于事件源的左上角的水平偏移，在 Chrome. Opera 和 Safari 浏览器中，左上角为外边框的位置；在 Firefox 和 IE 浏览器中，左上角为内边框的位置
offsetY	用于获取鼠标事件发生时相对于事件源的左上角的垂直偏移，浏览器的情况与 offsetX 同
srcElement	用于在 IE8 及以下版本的IE浏览器中，获取事件源
target	在 W3C 标准浏览器中获取事件源
type	获取事件类型
returnValue	取值为 true 或 falseo 用于在 IE8 及以下版本的IE浏览器中决定是否不执行与事件关联的默认动作。当值为 false 时，不执行默认动作

【例 1】事件对象的使用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象的使用</title>
<style>
#div1{width:100px;height:100px;background:red;position:absolute;}
</style>
<script>
     window.onload = function(ev){
       var oDiv = document.getElementById('div1');
       document.onmousemove = function(ev){
           var ev = ev || event;//获取事件对象的兼容处理
           //计算滚动条离屏幕顶端的距离
          var scrollTop = document.documentElement.scrollTop;
          //计算滚动条离屏幕左端的距离
          var scrollLeft = document.documentElement.scrollLeft;
          //加上滚动条距离可实现div紧跟在鼠标光标后面移动
          oDiv.style.top = ev.clientY + scrollTop + 'px';
          oDiv.style.left = ev.clientX + scrollLeft + 'px';
       };
     };
</script>
</head>
<body>
     <div id="div1"></div>
</body>
</html>

例 1 的功能是实现鼠标光标移动时，div 紧跟在鼠标光标后面移动。例 1 中的 JS 代码分别对事件对象以及滚动条与屏幕的距离进行了兼容处理。获取滚动条与屏幕左端和顶端的距离，现在都使用 document.documentElement.scrollTop 和 document.documentElement.scrollLeft。

另外，div 的 left 和 top 的值需要等于相对于可视窗口左上角的距离 clientX/clientY 加上滚动条与屏幕左端的距离 scrollLeft/scrollTop，否则，当文档窗口大于可视窗口时，鼠标光标移动时，div 有可能和鼠标光标分隔开，无法紧跟其后移动。

JS事件对象（event）

所有教程

优秀文章