屏幕坐标、客户区域（可视窗口）坐标、页面坐标的区分

区分三类坐标

屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下：

屏幕坐标

顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为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;
        }
    },
};