offset 部分
offset 自己的
目的：js 中有一套方便的获取元素尺寸的方法就是offset
常用：
offsetWidth offsetHeight
得到对象的宽度和高度（自己的，与他人无关）
offsetWidth = width+border +padding
例如：
div{ width:220px ; border-left:2px solid red; padding: 10px;}
div.offsetWidth=22
0....0+2+20
offsetLeft offsetTop
返回距离上级盒子（带有定位）左边的位置
如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅所指父类
offsetLeft 从父类的padding 开始算 父类border 不算
总之：子类容器到被定位的符类容器边框到边框的距离
offsetParent
返回对象父级（带有定位）
如果当期元素的父级元素没有进行css 定位（position 为 absolute 或者 relative）,offsetParent 为body
反之，如果当期元素的父级元素有ss 定位（position 为 absolute 或者 relative）,offsetParent取最近的那个父级元素
offsetTop 与 style.top 的区别
最大的区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置，而style.top 不可以
只有定位的容器才有left top right
offsetTop 返回的是数字，而style.top 返回的是字符串，除了数字外还有带单位：px
事件以及对象
btn.onclick=function(event){语句}
event :就是事件的意思
event 的常见属性
var event=event||window.event;//兼容写法
console.log(event.clientX);
console.log(event.clientY);
| data | 返回拖拽对象的URL字符串（dragDrop） |
| width | 该窗口或框架的高度 |
| height | 该窗口或框架的高度 |
| pageX | 光标相对于该网页的水平位置（ie无） |
| pageY | 光标相对于该网页的垂直位置（ie无） |
| screenX | 光标相对于该屏幕的水平位置 |
| screenY | 光标相对于该屏幕的垂直位置 |
| target | 该事件被传送到的对象 |
| type | 事件的类型 |
| clientX | 光标相对于该网页的水平位置 （当前可见区域） |
| clientY | 光标相对于该网页的水平位置 |
pageX clientX screenX 的区别
screenX ,screenY
是以电脑屏幕为基准点 测量
pageX pageY （ie678 不兼容）
以我们的文档（局对定位）的基准点对其
clientX cilent Y
以可视区域为基准点 类似于 相对定位
onmouseup 当鼠标弹起
onmousedown 当鼠标按下
防止选择拖动 过界
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();