JS中的offset scroll event client

1、offset

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

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

2、scroll

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

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

   1 function scroll() {
   2     //判断返回值是否是undefined
   3     if (window.pageXOffset !== undefined) {
   4         return {
   5             "top": window.pageYOffset,
   6             "left": window.pageXOffset
   7         }
   8     }else if (document.documentElement === "CSS1Compat") {
   9         return {
  10             "top": document.documentElement.offsetTop,
  11             "left": document.documentElement.offsetLeft
  12         }
  13     }else {
  14         return {
  15             "top": document.body.offsetTop,
  16             "left": document.body.offsetLeft
  17         }
  18     }
  19 
  20     // return {         //简写
  21     //     "top": window.pageYOffset || document.documentElement.offsetTop || document.body.offsetTop,
  22     //     "left": window.pageXOffset || document.documentElement.offsetLeft || document.body.offsetLeft
  23     // }
  24 }
  有了这样的封装函数就能够更简单的获得元素在页面或浏览器中的位置
  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

 

3、event

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

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

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

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

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

4、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调用，盒子也能够调用，但要有滚动条    表明被卷去的高度