JS中的offset scroll event client

一、offset

一般用来检测盒子的偏移、位移，都是只读属性，不能赋值

• offsetWidth和offsetHeight表示的是：调用者盒子的宽和高，包括盒子自身的padding和border
• offsetTop和offsetLeft是调用者的盒子距离有定位的父盒子顶部和左侧的长度。如果父盒子都没有定位，就以body为准，如果调用者自身没有top和left时，从父盒子的padding开始计算，不包括border

二、scroll

各种特效和动画中用的比较多，表示在页面滑动的过程中，卷起的部分

• scrollWidth和scrollHeight表示的是调用元素的全部宽度和高度，内容超出也会被算入，包括padding，不包括border和margin，即 scrollWidth = width + padding
• scrollTop和scrollLeft表示的是浏览器在滑轮滑动之后,被遮住的顶部和左侧长度

  function scroll() {
      //判断返回值是不是undefined
      if (window.pageXOffset !== undefined) {
          return {
              "top": window.pageYOffset,
              "left": window.pageXOffset
          }
      }else if (document.documentElement === "CSS1Compat") {
          return {
              "top": document.documentElement.offsetTop,
              "left": document.documentElement.offsetLeft
          }
      }else {
          return {
              "top": document.body.offsetTop,
              "left": document.body.offsetLeft
          }
      }
  
      // return {         //简写
      //     "top": window.pageYOffset || document.documentElement.offsetTop || document.body.offsetTop,
      //     "left": window.pageXOffset || document.documentElement.offsetLeft || document.body.offsetLeft
      // }
  }
  有了这样的封装函数就可以更简单的得到元素在页面或浏览器中的位置
  var pagey = event.pageY || scroll().top + event.clientY;             //后边是兼容性的写法,被遮挡高度 + 元素距浏览器高度
  
  

  这是封装的一个获取scrollTop和scrollLeft的兼容性写法,documentElement调用的是支持DTD,body调用的不支持DTD,pageYoffset方法是谷歌火狐IE9都支持的方法

判断当前是否声明DTD的方法:

document.compatMode === "BackCompat";    //未声明DTD
document.compatMode === "CSS1Compat";    //已声明DTD

 

三、event

 DOM中的事件,而事件处理函数可以附加在DOM、window这些对象上。在事件发生的时候，event对象会被创建并依次传递给事件监听器，之前已经说过创建事件监听器的方法addEventListener() 要注意的是，在IE旧版本里使用的是attchEvent()这种效果相同的方法，也可以以此写出兼容性的写法。

• 在处理函数中，可以将event作为形参传入，来访问一些Event接口，兼容性写法如：

  function method(event) {
      event = event || window.event;
  }

  还有好多东西等我以后慢慢发掘,现在还不知道这个里边有什么样的奇淫技巧

• 事件传播的三个阶段：
  • 捕获：从最上一级往下查找，直到找到目标事件
  • 冒泡：从目标事件开始向上层冒泡，直到最上一级
  • 目标：执行事件的代码

四、client

clientWidth：盒子的可见宽度，不包括border和margin  故clientWidth = padding + width

clientHeight：同上

clientTop：盒子上边框的border（喵喵喵？？？）

clientLeft：同上

区别：

clientWidth = width + border

offsetWidth = width + padding + border

scrollWidth = 内容的宽度（不含border）

 

clientTop：由event事件调用   代表border的宽

offsetTop：由任意元素调用，但一般是盒子   代表此盒子距离有定位的父盒子的距离

scrollTop：由window调用，盒子也可以调用，但要有滚动条    代表被卷去的高度