前端基本功：JS(十)client 家族

1、client 家族

client 可视区域

offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是内容的大小

client 可视区域

1/检测屏幕宽度(可视区域)

ie9及其以上的版本
window.innerWidth

标准模式
document.documentElement.clientWidth

怪异模式
document.body.clientWidth

封装可视区域大小的函数:

2/ window.onresize 改变窗口事件

昨天 window.onscroll = function() {} 屏幕滚动事件
今天 window.onresize = function() {} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生

案例：改变页面颜色

要求：
当我们的页面宽度大于 960 像素的时候 页面颜色是红色
当我们的页面宽度 大于 640 小于 960 页面的颜色是 绿色
剩下的颜色是 蓝色
案例源码：

function fun() { 语句 }
fun 是函数体的意思

fun() 调用函数 的意思

function fun() {
    return 3;
}
console.log(fun);  // 返回函数体 function fun() { retrun 3}
console.log(fun()); // 调用函数  3  返回的是结果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}

2、检测屏幕宽度(分辨率)

clientWidth 返回的是 可视区 大小 浏览器内部的大小
window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关系

3、简单冒泡机制

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

顺序:

E 6.0:
div -> body -> html -> document

其他浏览器:
div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

1/阻止冒泡的方法

标准浏览器 和 ie浏览器

w3c的方法是event.stopPropagation()
proPagation 传播 传递

IE则是使用event.cancelBubble = true
bubble 冒泡 泡泡 cancel 取消

兼容的写法：

1  if(event && event.stopPropagation)
2          {
3              event.stopPropagation();  //  w3c 标准
4          }
5          else
6          {
7              event.cancelBubble = true;  // ie 678  ie浏览器
8   }

2/ 小案例 点击空白处隐藏盒子

点击空白处案例.gif

这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。
原理：
点击自己不算 ( 怎么证明我是我 点击的这个对象id 正好和自己一样 )
点击空白处 就是点击 document

3/判断当前对象

火狐 谷歌 等 event.target.id
ie 678 event.srcElement.id
兼容性写法：

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

点击空白处隐藏盒子的完整案例源码：

    
    
    


注册
登录

4 /选中之后，弹出层

选定文字弹出层.gif

我们想，选中某些文字之后，会弹出一个弹出框
这个和 我们前面讲过的拖拽有点不一样。
拖拽 是拖着走。 拉着鼠标走 。
选择文字： 这个弹出的层 选中的时候不出来，弹起鼠标的时候才出现 。
所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置 再 鼠标的 clientX 和 clientY 一模一样
用来判断选择的文字.

5/获得用户选择内容

window.getSelection() 标准浏览器
document.selection.createRange().text; ie 获得选择的文字

兼容性的写法：

if(window.getSelection)
{
    txt = window.getSelection().toString();   // 转换为字符串
}
else
{
    txt = document.selection.createRange().text;   // ie 的写法
}

选定文字弹出层案例完整源码：

    
    
    



我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字

    我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字