JavaScript的封装

JavaScript的封装

1、对于位置获取和宽高获取

1. offset系列
   
   • offsetLeft：获取对象相对于版面或由offsetParent属性指定的父坐标的左侧位置。 （包括边框）
   • offsetTop：获取对象相对于版面或由offsetParent属性指定的父坐标的顶部位置。（包括边框）
   • offsetWidth：获取对象的宽度。（offsetWidth = width+padding+scrollbar+border）
   • offsetHeight：获取对象的高度。（offsetHeight = height+padding+scrollbar+border）
2. client系列
   
   • clientLeft：获取对象的左边框的宽度。
   • clientTop：获取对象的上边框的高度。
   • clientWidth：获取对象的内容可视区域的宽度。（clientWidth=width+padding，不包括滚动条）
   • clientHeight：获取对象的内容可视区域的高度。 （clientHeight=height+padding，不包括滚动条）
3. scroll系列
   
   • scrollLeft：设置或获取对象最左端和对象内容的最左端之间的距离。
   • scrollTop：设置或获取对象最顶端和对象内容的最顶端之间的距离。
   • scrollWidth：获取对象内容的实际宽度，即对象的滚动宽度。
   • scrollHeight：获取对象内容的实际高度，即对象的滚动高度。

2、对于各种位置的描述图像化

3、封装

对于封装，我们首先需要了解一下这些方法的兼容性。其实对于这个的兼容性主要是event和window.event的兼容，如下便是对于这个的兼容性。

var evt = {
    //window.event和时间参数e的兼容
    getEvent: function (event) {
        return event || window.event;
    },
    //可视区域的横纵坐标的兼容
    getClientX: function (event) {
        return this.getEvent(event).clientX;
    },
    getClientY: function (event) {
        return this.getEvent(event).clientY;
    },
    //页面卷曲的距离兼容
    getScrollLeft: function (event) {
        return window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;
    },
    getScrollTop: function (event) {
        return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;
    },
    getPageX: function (event) {
        if (this.getEvent(event).pageX) {
            return this.getEvent(event).pageX;
        } else {
            return this.getClientX(event) + this.getScrollLeft();
        }
    },
    getPageY: function (event) {
        if (this.getEvent(event).pageY) {
            return this.getEvent(event).pageY;
        } else {
            return this.getClientY(event) + this.getScrollTop();
        }
    }
};