事件对象event

一：事件对象event的属性

1. e.client：相对于当前页面（窗口，不是这个元素）可视区域的左顶点

document.onmousemove = function(e){
    var x = e.clientX;
    var y = e.clientY;
    console.log("横坐标：" + x + ",纵坐标：" + y;
}

2.e.screen：相对于计算机屏幕的左顶点

document.body.onclick = function(e){
    var x = e.screenX;
    var y = e.screenY;
    console.log("距离屏幕左边的距离：" + x + ",距离屏幕上边的距离：" + y);

}

3.offset：事件触发时鼠标距离该元素左边(x)或上边(y)的距离（与定位无关）

document.getElementById("son").onclick =  function(e){
    console.log(e.offsetY);
}

二：scroll、client、page、offset解析

1.offset: 偏移量（包含边框）

// 即使元素没有设置样式，只用文字填充，也能获取到  
offsetWidth：获取dom元素的宽度
offsetHight：获取dom元素的高度

// 注意：是到父盒子的padding为止
offsetLeft：到最近的带有定位的父盒子的padding左侧的距离。
offsetTop：到最近的带有定位的父盒子的padding上边的距离。

2.client： 可视；当前对象的可视区域宽高(不包含边框)(有兼容性)

clientWidth: 可视宽度(width + padding)
clientHight: 可视高度(height + padding)

兼容性写法：
var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0;

备注：
clientTop和clientLeft没用，他们通常指的就是border的宽度 
（如果有滚动条会包含滚动条的宽度）

3.scroll：卷曲；获取页面卷曲的距离(页面滚动的坐标)(有兼容性)

 document.onmouseover = function(){
    var x = document.body.scrollLeft;  
    var y = document.body.scrollTop;   
    console.log("左边卷曲的距离：" + x + ",上边卷曲的距离：" + y);
}

兼容性写法：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

4.page：鼠标在当前页面的位置(页面有卷曲的话要加上卷曲)(有兼容性)

// pageX和pageY不支持IE浏览器
// 它的用法和e.clientX和e.clienY大致相同，
// 但是当页面卷曲时，page系列能够获取到页面的准确坐标,计算了滚动的距离
// client系列不会计算滚动的距离
// 所以当设置图片随着鼠标滚动时，不计兼容问题的话，page系列很简单
// clien系列需要 + 对应的scroll

client：
pic.style.left = e.clientX + scrollLeft +"px";
pic.style.top = e.clientY + scrollTop + "px";

page：
pic.style.left = pageX +"px";
pic.style.top = pageY + "px";

三：jQuery中的offset和position

1. offset()方法
    offset({left: 100,top: 100})：设置元素相对于文档doucment的位置
    offset(): 获取元素相对于文档doucment的位置，获取的是一个对象
    offset().left;offset().top 获取距离文档左边或上边的距离   

2. position()方法
只能获取位置，不能设置
获取相对于其最近的有定位的父元素