contextmenu
事宜
该事宜用以示意什么时刻应当显现上下文菜单,以便开发者作废默许的上下文菜单,转而供应自定义的菜单。
由于该事宜属于鼠标事宜,所以其事宜对象中包括与光标位置有关的一切属性。如:
<body>
<ul id="menu" >
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script type="text/javascript">
window.addEventListener("contextmenu", function () {
event.preventDefault();
var menu = document.getElementById("menu");
menu.style.top = event.clientY + "px";
menu.style.left = event.clientX + "px";
menu.style.visibility = "visible";
});
window.addEventListener("click", function () {
var menu = document.getElementById("menu");
menu.style.visibility = "hidden";
})
</script>
</body>
chrome如今支撑该事宜,部份浏览器都支撑。
beforeunload
事宜
该事宜是为了让开发者有能够在页面卸载前阻挠这一操纵。event.returnValue
设置的值是显现给用户的字符串(关于IE以及Firefox而言),同时作为函数的值返回(对safari和chrome而言),如:
window.addEventListener("beforeunload", function () {
var message = "do you realy want to leave?";
event.returnValue = message;
return message;
}); //当脱离时会显现信息和两个按钮;当革新时也会提醒;
DOMContentLoaded
事宜
该事宜在构成完整的DOM树以后就会触发,不剖析图象、js文件、css文件等其他资本下载终了。
readystatechange
事宜
IE供应的事宜,支撑该事宜的每一个对象都有一个readyState属性,能够包括以下5个值中的一个:
uninitialized(未初始化):对象存在但还没有初始化;
loading(正在加载):对象正在加载数据;
loaded(加载终了):对象加载数据完成;
interactive(交互):能够操纵对象,但还没有完整加载;
complete(完成):对象已加载终了;
并不是每一个对象都邑阅历这些阶段;值为interactive的readyState会在与DOMContentLoaded大抵雷同的时刻触发readystatechange事宜。事宜的event对象不会供应任何信息。
switch (document.readyState) {
case "loading":
// 正在加载
console.log("loading");
case "interactive":
// 交互阶段 能够操纵对象了
var span = document.createElement("span");
span.textContent = "A <span> element.";
document.body.appendChild(span);
console.log("The document has finished loading. We can now access the DOM elements.")
case "complete":
// 完成阶段 完整加载终了了
console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
console.log("The page is fully loaded.")
break;
}
如:
document.addEventListener("readystatechange", function () {
if (document.readyState == "loading") {
var newP = document.createElement("p");
newP.appendChild(document.createTextNode("data1"));
document.body.appendChild(newP);
}
if (document.readyState == "interactive") {
var newP = document.createElement("p");
newP.appendChild(document.createTextNode("data2"));
document.body.appendChild(newP);
}
});
//上述代码的第一段并没有在document.body下建立一个新的p,由于readyState为loading的时刻并不能操纵对象;
又如:
document.addEventListener("readystatechange", function () {
if (document.readyState == "loading") {
var newP = document.createElement("p");
newP.appendChild(document.createTextNode("data1"));
document.body.appendChild(newP);
console.log(document.styleSheets[0].cssRules[0].cssText); //无效,由于loading的时刻,对象没有加载完整加载终了(complete)
}
if (document.readyState == "interactive") {
var newP = document.createElement("p");
newP.appendChild(document.createTextNode("data2"));
document.body.appendChild(newP);
console.log(document.styleSheets[0].cssRules[0].cssText); //能够有用,外部资本少的状况下完成阶段很能够在交互阶段之前涌现;而在外部资本较多的状况下完成阶段很能够在交互阶段以后涌现。
}
});
//上述代码的第一段并没有在document.body下建立一个新的p,由于readyState为loading的时刻并不能操纵对象;
交互阶段能够早于或晚于完成阶段涌现,没法确保递次。在包括较多外部资本的页面中,交互阶段更有能够涌现的早;在包括较少外部资本的页面中,完成阶段更有能够涌现的早。因而,为了尽量抢到先机,有必要同时检测交互和完成阶段,如:
document.addEventListener("readystatechange", function ready () {
if (document.readyState == "interactive" || document.readyState == "complete") {
document.removeEventListener("readystatechange", ready;
console.log("Content loaded");
}
});
见《js高等顺序设计》第十三章事宜范例html5事宜中readystatechange事宜,第二版391页
如许编写的代码,能够到达与运用DOMContentLoaded非常靠近的结果。
别的,关于script元素和link元素的加载状况参考:
pageshow
和pagehide
事宜
“往复缓存(back-forward cache或bfcache)”——能够在用户运用浏览器的“行进”、“退却”按钮时加速页面的转换速率。假如页面位于bgcache中,那末再次翻开该页面时就不会触发load事宜。
pageshow
事宜和event.persisted
属性
该事宜在页面显现时触发,虽然这个事宜的目的是document,然则必需将其事宜处置惩罚顺序添加到window。如:
window.addEventListener('pageshow', function(event) {
console.log('pageshow:');
console.log(event); //PageTransitionEvent
});
属性是一个布尔值,假如页面保存在了bfcache中,则这个属性的值为true;否则为false。
hashchange
事宜
该事宜以便在URL的参数列表(及URL中“#”号背面的一切字符串)发生变化时关照开发人员。必需把这个事宜的事宜处置惩罚顺序添加给window对象。event对象中有两个属性:oldURL
和newURL
。这两个属性离别保存着参数列表变化前后的完整URL:
window.addEventListener("hashchange", function () {
console.log("Old URL:" + event.oldURL + "\nNew URL: " + event.newURL);
});
检测:
假如IE8是在IE7文档形式下运转,纵然功用无效也会返回true:
var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);