事件类型总结

ui类型

1，load：当页面完全加载后（包括所有图像、 JavaScript 文件、CSS 文件等外部资源）在 window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上面触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。

（1），在html，为body标签写onload特性，在js，用于window.onload。

（2），在创建新的<img>元素时，可以为其指定一个事件处理程序，以便图像加载完毕后给出提示。此时，最重要的是要在指定 src 属性之前先指定事件。

（3），新图像元素不一定要从添加到文档后才开始下载，只要设置了 src 属性就会开始下载。

（4），开发人员经常使用Image 对象在客户端预先加载图像。可以像使用<img>元素一样使用 Image 对象，只不过无法将其添加到 DOM 树中。

（5），想向 DOM 中添加一个新元素，所以必须确定页面已经加载完毕

2,unload：当页面完全卸载后在 window 上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在<object>元素上面触发。

只要用户从一个页面切换到另一个页面，就会发生 unload 事件。而利用这个事件最多的情况是清除引用，以避免内存泄漏。

3,error：当发生 JavaScript 错误时在 window 上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发。

4,select：当用户选择文本框（<input>或<texterea>）中的一或多个字符时触发。

5，resize：当窗口或框架的大小变化时在 window 或框架上面触发。

IE、 Safari、 Chrome 和 Opera 会在浏览器窗口变化了 1 像素时就触发 resize 事件，然后随着变化不断重复触发。 Firefox 则只会在用户停止调整窗口大小时才会触发 resize 事件。由于存在这个差别，应该注意不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行，从而导致浏览器反应明显变慢

6，scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。 <body>元素中包含所加载页面的滚动条。

在混杂模式下，可以通过<body>元素的 scrollLeft 和 scrollTop 来监控到这一变化；而在标准模式下，除 Safari 之外的所有浏览器都会通过<html>元素来反映这一变化（Safari 仍然基于<body>跟踪滚动位置），如下面的例子所示：

EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat")
{
alert(document.documentElement.scrollTop);
}
else
{
alert(document.body.scrollTop);
}
});

以上代码指定的事件处理程序会输出页面的垂直滚动位置——根据呈现模式不同使用了不同的元素。由于 Safari 3.1 之前的版本不支持 document.compatMode，因此旧版本的浏览器就会满足第二个条件。与 resize 事件类似， scroll 事件也会在文档被滚动期间重复被触发，所以有必要尽量保持件处理程序的代码简单。

焦点事件

document.hasFocus()得知页面有没有获得焦点

document.activeElement获得或者设置页面焦点元素

 blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。

 focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。

 focusin：在元素获得焦点时触发。这个事件与 HTML 事件 focus 等价，但它冒泡。支持这个事件的浏览器有 IE5.5+、 Safari 5.1+、 Opera 11.5+和 Chrome。

 focusout：在元素失去焦点时触发。这个事件是 HTML 事件 blur 的通用版本。支持这个事件的浏览器有 IE5.5+、 Safari 5.1+、 Opera 11.5+和 Chrome。

当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：

(1) focusout 在失去焦点的元素上触发；

(2) focusin 在获得焦点的元素上触发；

(3) blur 在失去焦点的元素上触发；

(4) DOMFocusOut 在失去焦点的元素上触发；（DOM3 级事件废弃）

(5) focus 在获得焦点的元素上触发；

(6) DOMFocusIn 在获得焦点的元素上触发。（DOM3 级事件废弃）

鼠标与滚轮事件

 click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。（鼠标事件只有这个可以通过键盘触发）

 dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是 DOM2 级事件规范中规定的，但鉴于它得到了广泛支持，所以 DOM3 级事件将其纳入了标准。

 mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

 mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

 mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。 DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它纳入了规范。 IE、 Firefox 9+和 Opera 支持这个事件。

 mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。 DOM2 级事件并没有定义这个事件，但 DOM3 级事件将它纳入了规范。 IE、 Firefox 9+和 Opera 支持这个事件。

 mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。

 mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。

 mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。首次移入时触发意味着不能重复触发

只有在同一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click 事件；

如果有代码阻止了连续两次触发 click 事件（可能是直接取消 click事件，也可能通过取消 mousedown 或 mouseup 间接实现），那么就不会触发 dblclick 事件了。

这 4个事件触发的顺序始终如下：

(1) mousedown

(2) mouseup

(3) click

(4) mousedown

(5) mouseup

(6) click

(7) dblclick

鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和clientY 属性中,注意，这些值中不包括页面滚动的距离，因此这个位置并不表示鼠标在页面上的位置:

而页面坐标通过事件对象的 pageX 和pageY 属性，能告诉你事件是在页面中的什么位置发生的。因此坐标是从页面本身而非视口的左边和顶边计算的。

在页面没有滚动的情况下， pageX 和 pageY 的值与 clientX 和 clientY 的值相等。

IE8 及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到 document.body（混杂模式）或 document.documentElement（标准模式）中的

scrollLeft 和 scrollTop 属性。计算过程如下所示：

var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX,
pageY = event.pageY;
if (pageX === undefined){
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
if (pageY === undefined){
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
alert("Page coordinates: " + pageX + "," + pageY);
});

鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通过 screenX 和 screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息:

影响鼠标的修改键：这些修改键就是 Shift、 Ctrl、 Alt 和 Meta（在 Windows 键盘中是 Windows 键，在苹果机中是 Cmd 键），它们经常被用来修改鼠标事件的行为。

DOM 为此规定了 4 个属性，表示这些修改键的状态： shiftKey、 ctrlKey、 altKey 和 metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为 true，否则值为 false。当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下了其中的键。

相关元素，对 mouseover 事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对 mouseout 事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。

DOM 通过 event 对象的 relatedTarget 属性提供了相关元素的信息。这个属性只对于 mouseover和 mouseout 事件才包含值；对于其他事件，这个属性的值是 null。IE8及之前版本不支持 relatedTarget属性，但提供了保存着同样信息的不同属性。在 mouseover 事件触发时， IE 的fromElement 属性中保存了相关元素；在 mouseout 事件触发时， IE 的 toElement 属性中保存着相关元素。

鼠标按钮值，对于 mousedown 和 mouseup 事件来说，则在其 event 对象存在一个 button 属性，表示按下或释放的按钮。 DOM 的 button 属性可能有如下 3 个值： 0 表示主鼠标按钮， 1 表示中间的鼠标按钮（鼠标滚轮按钮）， 2 表示次鼠标按钮。在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标按钮就是鼠标右键。IE存在兼容问题，见13.4。在使用 onmouseup 事件处理程序时， button 的值表示释放的是哪个按钮。如果不是按下或释放了主鼠标按钮， Opera 不会触发 mouseup 或 mousedown事件。

“ DOM2 级事件”规范在 event 对象中还提供了 detail 属性，用于给出有关事件的更多信息。对于鼠标事件来说， detail 中包含了一个数值，表示在给定位置上发生了多少次单击。

滚轮事件

这个事件可以在任何元素上面触发，最终会冒泡到 document（IE8）或 window（IE9、 Opera、

Chrome 及 Safari）对象。与 mousewheel 事件对应的 event 对象除包含鼠标事件的所有标准信息外，还包含一个特殊的 wheelDelta 属性。当用户向前滚动鼠标滚轮时， wheelDelta 是 120 的倍数；当用户向后滚动鼠标滚轮时， wheelDelta 是-120 的倍数。