冒泡机制和可视区

look_w

获取屏幕可视区

    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的根节点。

    图解

3359912-5b0a64344631e600.png
图解

    阻止冒泡

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