JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
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);JavaScript 事件——“事件类型”中“HTML5事件”的注意要点的更多相关文章
- Javascript高级编程学习笔记（67）—— 事件（11）HTML5事件
DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- JavaScript 中的事件类型5（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- JavaScript 中的事件类型4（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- JavaScript 中的事件类型1（读书笔记思维导图）
Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...
- 再次理解javascript中的事件
一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 + 事件冒泡接收事件的顺序:
- 学习javascript中的事件——事件流
事件概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道 ...
- 《JavaScript 闯关记》之事件
JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event).例如,当 Web 浏览器 ...
- 《JavaScript高级程序设计》笔记：事件（十三）
事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDi ...
随机推荐
- linux系统配置之PATH环境变量的设置（centos）
Centos系统下修改环境变量PATH路径的方法 电脑脑中必不可少的就是操作系统.而Linux的发展非常迅速,有赶超微软的趋势.这里介绍Linux的知识,让你学好应用Linux系统.比如要把/etc/ ...
- C++之new和delete
new 和 delete 是 C++ 用于管理 堆内存 的两个运算符,对应于 C 语言中的 malloc 和 free,但是 malloc 和 free 是函数,new 和 delete 是运算符.除 ...
- SimpliciTI Sample Applications
Sample Applications 介绍了4个简单的示例应用程序来演示SimpliciTI的各种特性和功能. Simple Peer-To-Peer :two linked End-Devices ...
- tabbar
1 tabbar不显示的问题: 命名在app.json中配置了tabbar但是不显示可能的问题: app.json中的pages中第一个路径没有在tabbar中设置 原因:app.json中配置的pa ...
- Firebug 的脚本页面不能用
1.遇到这种情况,一般重置firebug,然后开启“脚本“功能,刷新页面,就能显示正常 2.要不就是 版本问题,50.0不行,下载回49版本就可以了
- JQuery点击table获取点击行的数据
$(function () {var TaskType = '';$("#data_table tr:gt(0)").click(function () { TaskType = ...
- SqlServer2012——快照
1.数据库快照 优点: 维护历史数据以生成报表.由于数据库快照可提供数据库的静态视图,因而可以通过快照访问特定时间点的数据. 将查询实施在数据库的快照上,可以释放主体数据库上的资源. 数据库快照的限制 ...
- E20180603-hm
breadth n. 宽度; 宽容; (知识.兴趣等的) 广泛; depth n. 深度; 深处,深海; 深奥,奥妙; 进深; deep adj. 深的; 深远的,深奥; 重大的,深刻的; 强烈的 ...
- 51nod1625(枚举&贪心)
题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1625 题意:中文题诶- 思路:枚举+贪心 一开始写的行和列同时 ...
- Codevs 1569 最佳绿草
1569 最佳绿草 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description 贝茜正计划着这一天如何美美地咀嚼春天的绿 ...