08 - 冒泡机制和可视区

---

获取屏幕可视区

function client(){
    if(window.innerWidth != null){
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }
    else if(document.compatMode === "CSS1compat"){
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
    else{
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        }
    }
}

常用窗口事件-onresize

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

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

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

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

• 案例

• 改变屏幕颜色.html http://www.jianshu.com/p/b505f4bad9ce

冒泡机制

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

• 图解

图解

• 阻止冒泡

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

获取当前操作对象

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

获取用户选中的内容

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