事件类型
“DOM3级事件” 规定了以下几类事件：
-
UI事件当用户与页面上元素交互时触发 焦点事件当元素获得或者失去焦点时触发鼠标事件当元素通过鼠标在页面上执行操作时触发滚轮事件当使用鼠标滚轮时触发文本事件当在文档中输入文本时触发键盘事件当用户通过键盘在页面上操作时触发
UI 事件
{0}. load 事件
JavaScript 中最常用的一个事件就是 load 。当页面完全加载后，就会触发window上面的load事件。
EventUtil.addHandler(window, "load", function(event){
alert("loaded !")
})
图片上面也可以触发 load 事件，无论是在 DOM 中的图像还是 HTML 中的图像元素。
在创建新的<img>元素时，可以指定一个事件处理程序，以便图片加载完毕后给出提示
EventUtil.addHandler(window, "load", function(){
var image = new image()
EventUtil.addHandler(image, "load", function(event){
alert("Image loaded !")
})
image.src = "smile.gif"
})
<script> 元素也会触发 load 事件，以便开发人员确定动态加载的 JavaScript 文件是否加载完毕
EventUtil.addHandler(window, "load", function(){
var script = document.createElement("script")
EventUtil.addHandler(script, "load", function(event){
alert("Loaded")
})
script.src = "example.js"
document.body.appendChild(script)
})
{0}. unload 事件
与 load 事件对应的是 unload 事件，这个事件在文档被完全卸载后触发。利用这个事件最多的情况就是清除引用，以避免内存泄露。
{0}. resize 事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。这个事件在 window 上面触发，因此可以通过 body 元素中的 onresize 特性来指定特定的事件处理程序
EventUtil.addHandler(window, "resize", function(event){
alert("Resized")
})
{0}. scroll 事件
scroll 是在 window 对象上发生的，但它实际表示的是页面中相应元素的变化。
EventUtil.addHandler(window, "scroll", function(){
if(document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop)
}
})
焦点事件
焦点事件会在页面元素获得或者失去焦点时触发。有以下6个焦点事件。
blur: 在元素失去焦点时触发。这个事件不会冒泡DOMFocusIn: 在元素获得焦点时触发。这个事件与focus等价, 但它冒泡, 只有Opera支持这个事件, DOM3级 事件已经废除, 选择了 focusin。DOMFocusOut: 在元素失去焦点时触发。这个事件是blur的通用版本, 但它冒泡, 只有Opera支持这个事件, DOM3级 事件已经废除, 选择了 focusout。focus: 在元素获得焦点时触发。这个事件不会冒泡, 所有浏览器都支持。
这一类事件最主要的两个是focus和blur, 他们都是早期就得到了所有浏览器的支持。
鼠标与滚轮事件
鼠标事件是 Web 开发中最常用的一类事件, DOM3级事件中定义了 9 个鼠标事件。
click: 在用户点击主鼠标按钮或者回车键时触发。dblclick: 在用户双击主鼠标时触发。mousedown: 在用户按下任意鼠标按钮时触发。mouseenter: 在鼠标光标从元素外部首次移动到元素范围之内时触发。这是事件不冒泡, 而且在光标移动到后代元素上不会触发。mouseleave: 在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不会冒泡, 而且在光标 移动到后代元素上不会触发。mousemove: 当鼠标指针在元素内部移动时重复地触发。mouseout: 在鼠标指针位于一个元素上方, 然后用户将已入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部, 也可能是这个元素的子元素。mouseover: 在鼠标指针位于一个元素外部, 然后用户将其首次移入另一个元素边界之内时触发。mouseup: 在用户释放鼠标按钮时触发。
