1.contextmenu事件

通过鼠标右键点击触发，该事件是冒泡事件，支持此事件的浏览器包括IE,看下面的例子：

<div id="myDiv">dddddddddddddddddddddddddddddddd</div>  
<ul id="myMenu" style="position:absolute;visibility: hidden;background-color: silver">  
    <li href="https://www.baidu.com">baidu</li>  
    <li href="https://www.baidu.com">baidu</li>  
    <li href="https://www.baidu.com">baidu</li>  
</ul>

function handleContext() {  
        var div = document.getElementById('myDiv');  
        var menu = document.getElementById('myMenu');  
        div.oncontextmenu = function (ev) {  
            ev.preventDefault();  
            menu.style.left = ev.clientX + 'px';  
            menu.style.top = ev.clientY + 'px';  
            menu.style.visibility = 'visible';  
        };  
        menu.onclick = function (ev) {  
            menu.style.visibility = 'hidden'  
        }  
    }  
handleContext()  

2.beforeunload事件

在页面卸载前可以阻止卸载。这个事件在浏览器卸载页面前触发，可以通过它来取消卸载并继续使用原网页，此事件可以在触发后添加消息，已让用户来确定是否卸载页面。

在测试chrome，opera，Firefox, Edge后发现自定义文本不会生效,IE11自定义文本会生效。在beforeunload事件中，必须指定returnValue.

window.onbeforeunload = function (ev) {  
    ev.returnValue = '你确定卸载页面吗？';  
}  

3.DOMContentLoaded事件

window 的 load 事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的外部资源过多而颇费周折。而 DOMContentLoaded 事件则在形成完整的 DOM 树之后就会触发， 不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。与 load 事件不同， DOMContentLoaded 支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面进行交互。
要处理 DOMContentLoaded 事件，可以为 document 或 window 添加相应的事件处理程序（尽管这个事件会冒泡到 window，但它的目标实际上是 document）。来看下面的例子。

document.addEventListener('DOMContentLoaded', function (event) {  
    alert('content loaded')  
})  

关于此事件详情，点击访问详情
IE9+、Firefox、Chrome、Safari 3.1+和 Opera 9+都支持 DOMContentLoaded 事件，通常这个事件既可以添加事件处理程序，也可以执行其他 DOM 操作。这个事件始终都会在 load 事件之前触发。

4.readystatechange事件

IE为DOM文档中的某些部分提供了 readystatechange 事件。这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。支持 readystatechange 事件的每个对象都有一个 readyState 属性，可能包含下列 5 个值中的一个。
 uninitialized（未初始化）：对象存在但尚未初始化。
 loading（正在加载）：对象正在加载数据。
 loaded（加载完毕）：对象加载数据完成。
 interactive（交互）：可以操作对象了，但还没有完全加载。
 complete（完成）：对象已经加载完毕。
这些状态看起来很直观，但并非所有对象都会经历 readyState 的这几个阶段。换句话说，如果某个阶段不适用某个对象，则该对象完全可能跳过该阶段；并没有规定哪个阶段适用于哪个对象。显然，这意味着 readystatechange 事件经常会少于 4 次，而 readyState 属性的值也不总是连续的。
对于 document 而言，值为"interactive"的 readyState 会在与 DOMContentLoaded 大致相 同的时刻触发 readystatechange 事件。此时，DOM 树已经加载完毕，可以安全地操作它了，因此就 会进入交互（interactive）阶段。但与此同时，图像及其他外部文件不一定可用。下面来看一段处理readystatechange 事件的代码。
支持 readystatechange 事件的浏览器有 IE、Firfox 4+和 Opera。

5.pageshow和pagehide事件

Firefox 和 Opera 有一个特性，名叫“往返缓存”（back-forward cache，或 bfcache），可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了 DOM 和 JavaScript 的状态；实际上是将整个页面都保存在了内存里。如果页面位于 bfcache 中，那么再次打开该页面时就不会触发 load 事件。
第一个事件就是 pageshow，这个事件在页面显示时触发，无论该页面是否来自 bfcache。在重新加载的页面中，pageshow 会在 load 事件触发后触发；而对于 bfcache 中的页面，pageshow 会在页面状 态完全恢复的那一刻触发。另外要注意的是，虽然这个事件的目标是 document，但必须将其事件处理程序添加到 window。
除了通常的属性之外，pageshow 事件的 event 对象还包含一个名为 persisted 的布尔值属性。 如果页面被保存在了 bfcache 中，则这个属性的值为 true；否则，这个属性的值为 false。
pageshow 和 pagehide 事件的浏览器有 Firefox、Safari 5+、Chrome 和 Opera。IE9 及之前版本不支持这两个事件。
6.hashchange事件
便于在URL的参数列表（即URL中‘#’号后面的所有字符串）发生变化时通知开发人员。之所以新增这个事件，是因为在 Ajax 应用中，开发人员经常要利用 URL 参数列表来保存状态或导航信息。
必须要把 hashchange 事件处理程序添加给 window 对象，然后 URL 参数列表只要变化就会调用它。此时的 event 对象应该额外包含两个属性：oldURL 和 newURL。这两个属性分别保存着参数列表变化前后的完整 URL。例如：

window.addEventListener('hashchange', function (event) {  
    console.log('Old URL:' + event.oldURL + 'New Url:' + event.newURL)  
})  

支持 hashchange 事件的浏览器有 IE8+、Firefox 3.6+、Safari 5+、Chrome 和 Opera 10.6+。在这些 浏览器中，只有 Firefox 6+、Chrome 和 Opera 支持 oldURL 和 newURL 属性。为此，最好是使用 location对象来确定当前的参数列表。

设备事件

更多详情，点击此链接

1. orientationchange 事件

苹果公司为移动 Safari 中添加了 orientationchange 事件，以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向查看模式。移动 Safari 的 window.orientation 属性中可能包含 3 个值： 0 表示肖像模式，90 表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90 表示向右旋转的横向模式（“主屏幕”按钮在左侧）。相关文档中还提到一个值，即 180 表示 iPhone 头朝下；但这种模式至今尚未得到支持。图 13-10 展示了 window.orientation 的每个值的含义。

EventUtil.addHandler(window, "load", function(event){  
    var div = document.getElementById("myDiv");  
    div.innerHTML = "Current orientation is " + window.orientation;  
    EventUtil.addHandler(window, "orientationchange", function(event){  
    div.inerHTML = "Current orientation is " + window.orientation;  
    });  
});  

所有 iOS 设备都支持 orientationchange 事件和 window.orientation 属性。

2. MozOrientation 事件

Firefox 3.6 为检测设备的方向引入了一个名为 MozOrientation 的新事件。

3. deviceorientation 事件

本质上，DeviceOrientation Event 规范定义的 deviceorientation 事件与 MozOrientation 事件类 似。它也是在加速计检测到设备方向变化时在 window 对象上触发，而且具有与 MozOrientation 事件相同的支持限制。不过，deviceorientation 事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动。

4. devicemotion 事件

DeviceOrientation Event 规范还定义了一个 devicemotion 事件。这个事件是要告诉开发人员设备什么时候移动，而不仅仅是设备方向如何改变。例如，通过 devicemotion 能够检测到设备是不是正在往下掉，或者是不是被走着的人拿在手里。 触发 devicemotion 事件时，事件对象包含以下属性。