文档与元素事件
文档事件
在实际应用中，我们经常会遇到这样的场景，当页面加载完成后去做一些事情：绑定事件、DOM操作某些结点等。原来比较常用的是
1. Prototype 2. jQeury 3. moontools 4. dojo 5. yui 6. ext
最后总结各大框架的
/*
* 注册浏览器的DOMContentLoaded事件
* @param { Function } onready [必填]在DOMContentLoaded事件触发时需要执行的函数
* @param { Object } config [可选]配置项
*/
function onDOMContentLoaded(onready, config) {
//浏览器检测相关对象，在此为节省代码未实现，实际使用时需要实现。
//var Browser = {};
//设置是否在FF下使用DOMContentLoaded(在FF2下的特定场景有Bug)
this.conf = {
enableMozDOMReady: true
};
if (config) for (var p in config) this.conf[p] = config[p];
var isReady = false;
function doReady() {
if (isReady) return; //确保onready只执行一次
isReady = true;
onready();
} /*IE*/
if (Browser.ie) {
(function() {
if (isReady) return;
try {
document.documentElement.doScroll("left");
} catch (error) {
setTimeout(arguments.callee, 0);
return;
}
doReady();
})();
window.attachEvent("onload", doReady);
} /*Webkit*/ else if (Browser.webkit && Browser.version < 525) {
(function() {
if (isReady) return;
if (/loaded|complete/.test(document.readyState)) doReady();
else setTimeout(arguments.callee, 0);
})();
window.addEventListener("load", doReady, false);
} /*FF Opera 高版webkit 其他*/ else {
if (!Browser.ff || Browser.version != 2 || this.conf.enableMozDOMReady)
document.addEventListener(
"DOMContentLoaded",
function() {
document.removeEventListener(
"DOMContentLoaded",
arguments.callee,
false
);
doReady();
},
false
);
window.addEventListener("load", doReady, false);
}
}
该
对于
- 我们可以对那些定期刷新内容的页面进行控制，当该页面不可见则不刷新，可见则刷新
- 我们还可以根据页面的是否可见来暂停和继续音频，视频的播放
- 我们还可以根据页面可见去计算我们网站的用户停留在本页面的更为精确的数据，而不仅仅是打开页面而不停留在本页面。
【document.hidden】 该值表示
【document.visibilityState】 这个
【visible】 表示该
page 是处于最前面的页面并且不是处于一个最小化的窗口【hidden】 表示该
page 不是处于最前面的页面或者是处于一个最小化的窗口【prerender】 表示该页面内容正在重新渲染并且该页面对于用户是不可见的
【isibilitychange Event】监听
// 设置隐藏属性和可见改变事件的名称，属性需要加浏览器前缀 // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// 添加一个标题改变的监听器
document.addEventListener(
visibilityChange,
function(e) {
// 开始或停止状态处理
},
false
);
Full Screen( 全屏)
该
// 找到适合浏览器的全屏方法 function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// 启动全屏模式
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element
// Whack fullscreenfunction exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Cancel fullscreen for browsers that support it!
exitFullscreen();
目前
【document.fullScreenElement】 该属性表示启动全屏的元素
【document.fullScreenEnabled】该属性表示当前是否全屏
【fullscreenchange 事件】 监听全屏状态改变的事件
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:full-screen {
/*pre-spec */
/* properties */
}
:fullscreen {
/* spec */
/* properties */
}
/* deeper elements */:-webkit-full-screen video {
width: 100%;
height: 100%;
}
/* styling the backdrop*/::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}
第一次见到这个