client家族

1.1 clientWidth和clientHeight

• 网页可见区域宽： document.body.clientWidth;

• 网页可见区域高： document.body.clientHeight;

1.2 clientLeft和clientTop

• clientLeft，clientTop

  • 返回的是元素边框的borderWidth，

  • 如果不指定一个边框或者不定位改元素，其值就为0

1.3 offset、client和scroll的区别分析

• left和top分析：

  • clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度

  • offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离

  • scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;

• width和height分析

  • clientWidth/Height: 内容 + 内边距

  • offsetWidth/Height: 内容 + 内边距 + 边框

  • scrollWidth/Height: 滚动内容的宽度和高度

    
    image.png

二、获取屏幕的可视区域

• ie9及其以上的版本、最新浏览器

  window.innerWidth, window.innerHeight
  

• 标准模式浏览器

  document.documentElement.clientWidth
  document.documentElement.clientHeight
  

• 怪异模式

  document.body.clientWidth, document.body.clientHeight
  

• 通用写法

  function client() {
         if(window.innerWidth){ // ie9及其以上的版本
             return{
                 width: window.innerWidth,
                 height:  window.innerHeight
             }
         }else if(document.compatMode != 'CSS1Compat'){  // 怪异模式
             return{
                 width: document.body.clientWidth,
                 height: document.body.clientHeight
             }
         }
         // 标准
         return{
               width: document.documentElement.clientWidth,
               height: document.documentElement.clientHeight
         }
  }
  

三、常用窗口事件-onresize

• 当窗口或框架的大小发生改变的时候就会调用；

• onresize一般被运用于自适应页面布局等多屏幕适配场景；

• 应用：当屏幕的宽度>=960时，页面的背景颜色为红色；当屏幕的宽度>=640时，页面的背景颜色为蓝色；当屏幕的宽度<640时，页面的背景颜色为绿色？

• 补充：获取屏幕的分辨率：window.screen.width window.screen.height

四、JS的事件传递机制

image.png

4.1 冒泡机制

• 气泡从水底开始往上升，由深到浅，升到最上面。在上升的过程中，气泡会经过不同深度层次的水。相对应地：这个气泡就相当于我们这里的事件，而水则相当于我们的整个dom树；事件从dom 树的底层，层层往上传递，直至传递到dom的根节点。

  [图片上传失败...(image-73ef07-1512199867044)]

• IE 6.0:

  • div -> body -> html -> document

• 其他浏览器:

  • div -> body -> html -> document -> window

• 注意：不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload

4.2 阻止冒泡的方法

• 标准浏览器 和 ie浏览器

  • w3c：event.stopPropagation()

    proPagation 传播 传递

  • IE：event.cancelBubble = true

    bubble 冒泡 cancel 取消

• 兼容的写法

  var event = event || window.event;
  if(event.stopPropagation){ // w3c标准
      event.stopPropagation();
  }else{ // IE系列 IE 678
      event.cancelBubble = true;
  }
  
  

4.3 获取当前操作对象

• 开发中，当执行一个事件时需要去知道触发这个事件的对象是谁？那么，如何获取：

  • 火狐、谷歌 event.target

  • ie 678 event.srcElement

• 一般是获取这个对象的id，兼容的写法如下：

   var targetId = event.target ? event.target.id : event.srcElement.id;
  
  

4.4 获取用户选中的内容

• 标准浏览器

  • window.getSelection()

• ie 获得选择的文字

  • document.selection.createRange().text;

• 兼容性的写法

  var selectedText;
  if(window.getSelection){ // 标准模式 获取选中的文字
     selectedText = window.getSelection().toString();
  }else{ // IE 系列
     selectedText = document.selection.createRange().text;
  }