获取屏幕可视区
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;
}