JavaScript中offset家族

目录

一、

 (2) offsetWidth 与 dom.style.width 的区别

（3）offsetLeft & offsetTop 是用来计算盒子与盒子之间距离的

 (4) offsetLeft 与 dom.style.left 的区别

（5）offsetParent 用来获取父级DOM对象

（6）offsetParent 与 dom.parentNode 的区别

二、事件对象

1.何为事件对象？

2.事件对象的兼容写法

3.event对象提供的api

（1）鼠标触发的事件

（2）键盘触发的事件

---

一、

1.dom.style.attr这种方式，只能读/写DOM元素的行内样式，它对于非行内样式（外部的样式表）无能为力。

2.如果想实时的读取盒子的样式，而不管它是行内还是非行内，那么就必须使用offset家族提供的api

（1）offsetWidth & offsetHeight

 (2) offsetWidth 与 dom.style.width 的区别

      1 offsetWidth既能读取外部样式，也能读取行内样式；而dom.style.width只能读取行内样式

    2 offsetWidth读取出来的只是number类型，不带'px'；而width读取出来的值是string类型，带有‘px’

      3 offsetWidth是只读的,不能赋值；而dom.style.width可读，可写

  offsetWidth = width + padding + border

（3）offsetLeft & offsetTop 是用来计算盒子与盒子之间距离的

 (4) offsetLeft 与 dom.style.left 的区别

     1 offsetLeft既能读取外部样式，也能读取行内样式；而dom.style.Left只能读取行内样式

     2 offsetLeft读取出来的只是number类型，不带'px'；而dom.style.Left读取出来的值是string类型，带有‘px’

      3 offsetLeft是只读的,不能赋值；而dom.style.Left可读，可写

      4 offsetLeft读取的是目标盒子的左边框 到 自己定位参照物的盒子的左边框的距离，如果没有任何一级的父盒子声明了定位方式，那么offsetLeft读取的就是目标盒子到body左边框的距离

      注意：只有offsetLeft，offsetTop，没有offsetRight，offsetBottom

（5）offsetParent 用来获取父级DOM对象

（6）offsetParent 与 dom.parentNode 的区别

    1 dom.parentNode永远是直接父元素；dom.offsetParent获取到的父级元素，跟定位有关系

    2 如果dom的任何一个父级盒子都没有生命position定位，那么dom.offsetParent获取到的父级对象就是body

    3 如果dom的父级盒子有声明了position定位方式，那么dom.offsetParent获取的父级对象就是离它最近的那个声明了position定位的盒子

（7）offset家族就这么多，没有其他的成员了。

二、事件对象

1.何为事件对象？

事件对象是用来帮我们获取，在js事件触发时一系列有用信息的参数对象。

事件对象的名字，一般使用event。当然这不是必须的

2.事件对象的兼容写法

div[i].onclick = function(event){

     var evt = event || window.event;

}

3.event对象提供的api

（1）鼠标触发的事件

    1 event.target

    2 event.srcElement  1和2的功能是相同的，都是过去事件源对象：区别是event.srcElement是IE支持的

    3 event.type 获取事件类型

    4 event.clientX:获取当前鼠标在网页上的横坐标，只跟网页上可视区域内的坐标有关系

    5 event.clientY:获取当前鼠标在网页上的纵坐标，只跟网页上可视区域内的坐标有关系

    6 event.screenX:获取当前鼠标在当前显示器上的横坐标

    7 event.screenY:获取当前鼠标在当前显示器上的纵坐标 

    

（2）键盘触发的事件