屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下：
屏幕坐标顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为screenX，screenY,范围如上图最外层红色边框范围，坐标为蓝色虚线对应的坐标。可以使用类似下面的代码取得鼠标事件的屏幕坐标:
var div = document.getElementById("myDiv");EventUtil.addHandler(div, "click", function(event){ event = EventUtil.getEvent(event); alert("Screen coordinates: " + event.screenX + "," + event.screenY);});上述代码中的EventUtil是一个事件工具函数，在文末会给出
客户区域（可视窗口）坐标可以将浏览器分为两大块，即浏览器上部的用户操作栏（宝蓝色框所对应的区域）和下部的可视窗口区域（上图中棕色框所对应的区域），该坐标系（颜色为粉色）的原点位于可视窗口的右上角，对应的属性为clientX,clientY 可以使用类似下列代码取得鼠标事件的客户端坐标信息:
var div = document.getElementById("myDiv");EventUtil.addHandler(div, "click", function(event){ event = EventUtil.getEvent(event); alert("Client coordinates: " + event.clientX + "," + event.clientY);}); 页面坐标过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的 pageX 和 pageY 属性，能告诉你事件是在页面中的什么位置发生的。换句话说，这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的（页面为蓝色边框对应的区域，坐标系为棕色坐标系）。 以下代码可以取得鼠标事件在页面中的坐标:
var div = document.getElementById("myDiv");EventUtil.addHandler(div, "click", function(event){ event = EventUtil.getEvent(event); alert("Page coordinates: " + event.pageX + "," + event.pageY);}); 总结第一次写技术类的文章，文中有不对的地方，敬请指出。另附上《JavaScript高级程序设计》一书中总结的EventUtil事件工具函数：
var EventUtil = { addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, //它返回对 event 对象的引用 getEvent: function(event){ return event ? event : window.event; }, //它返回事件的目标 getTarget: function(event){ return event.target || event.srcElement; }, //用于取消事件的默认行为 preventDefault: function(event){ if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } }, removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, // 由于 IE 不支持事件捕获，因此这个方法在跨浏览器的情况下，也只能用来阻止事件冒泡。 stopPropagation: function(event){ if (event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble = true; } },};