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元素的加载情况参考:

就绪状态(readystatechange)事件

pageshowpagehide事件

“往返缓存(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对象中有两个属性:oldURLnewURL。这两个属性分别保存着参数列表变化前后的完整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事件”的注意要点的更多相关文章

  1. Javascript高级编程学习笔记(67)—— 事件(11)HTML5事件

    DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非 ...

  2. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  3. JavaScript 中的事件类型5(读书笔记思维导图)

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  4. JavaScript 中的事件类型4(读书笔记思维导图)

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  5. JavaScript 中的事件类型1(读书笔记思维导图)

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  6. 再次理解javascript中的事件

    一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 +    事件冒泡接收事件的顺序:

  7. 学习javascript中的事件——事件流

    事件概念: HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件onclick.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道 ...

  8. 《JavaScript 闯关记》之事件

    JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event).例如,当 Web 浏览器 ...

  9. 《JavaScript高级程序设计》笔记:事件(十三)

    事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDi ...

随机推荐

  1. 在WinDBG中查看调用栈的命令

    命令 ========== k k命令显示的是一定数量的栈帧, 其中帧的数量是由.kframes命令来控制的, 默认值是256. kp 5 显示调用栈中前5个函数以及他们的参数. kb 5 显示调用栈 ...

  2. 各浏览器userAgent汇总

    浏览器  navigator.userAgent  备注  IE6  Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)   IE7  Mo ...

  3. mongodb "$"的作用

    { "_id": ObjectId("58e48e32830f398e8f401a95"), "_class": "com.ydd ...

  4. java集合框架之HashCode

    参考http://how2j.cn/k/collection/collection-hashcode/371.html List查找的低效率 假设在List中存放着无重复名称,没有顺序的2000000 ...

  5. HDU 2586 How far away ? (LCA,Tarjan, spfa)

    题意:给定N个节点一棵树,现在要求询问任意两点之间的简单路径的距离,其实也就是最短路径距离. 析:用LCA问题的Tarjan算法,利用并查集的优越性,产生把所有的点都储存下来,然后把所有的询问也储存下 ...

  6. QDUoj GZS的三角形 棋盘里的数学 思维+杨辉三角

    1. 题目 我的提交 GZS的三角形 发布时间: 2015年9月6日 15:18   最后更新: 2016年6月26日 12:10   时间限制: 1000ms   内存限制: 256M 描述 机智无 ...

  7. 【转】Maven 入门

    [转]http://www.blogjava.net/jiangshachina/archive/2006/09/01/67080.html   Maven入门--概念与实例  最近由于工作原因在研究 ...

  8. C#简单的国际化

    1.新建一个资源文件夹,并在资源文件夹新建中英问的资源文件,如图: 2.中英文资源文档添加资源,如图: 3.Program.cs中添加根据系统语言确定中英文,这里默认为英文: using Intern ...

  9. PTA 4-3 二叉树的遍历

    //左根右 void InorderTraversal( BinTree BT ) { if(BT) { InorderTraversal(BT->Left); printf(" %c ...

  10. CodeForces 644B【模拟】

    题意: 查询数 和 最大的队列容量+1: 按时间顺序 ti代表,第i个出线的时间: di代表,第i个需要处理的时间: 对于第i个输出他所需要的时间完成,或者拒绝进入输出-1: 思路: 真是MDZZ了, ...