电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 冒泡机制和可视区 [打印本页]

作者: look_w 时间: 2019-2-19 16:39 标题: 冒泡机制和可视区

获取屏幕可视区

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;
}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)