js学习笔记：事件——事件类型

js学习笔记：事件——事件类型
web浏览器中可能发生的事件有很多类型。DOM3级事件规定了以下几类事件：

• UI事件：当用户与页面上的元素交互时触发。
• 焦点事件：当元素获得或失去焦点时触发
• 鼠标事件：当用户通过鼠标在页面上执行操作时触发
• 滚轮事件：当使用鼠标滚轮时触发
• 文本事件：当在文档中输入文本时触发
• 键盘事件：当用户通过键盘在页面上执行操作时触发

• 変动事件：当底层DOM结构发生变化时触发

  除了这几类事件之外，HTML5也定义了一组事件，有些浏览器还会在DOM和BOM中实现其他专有事件。

UI事件

UI事件指的是那些不一定与用户操作有关的事件。现有的UI事件如下：

• load：当页面完全加载后在window上面触发；当所有框架都加载完毕时在框架集上面触发；当图像加载完毕时在< img>上面触发；或者当嵌入的内容加载完毕时在< object>元素上面触发。
• unload：当页面完全卸载后在window上面触发；当所有框架卸载后在框架集上面触发；或者当嵌入的内容且在完毕后在< object>元素上触发。
• abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在< object>元素上触发。
• error：当发生javascript错误时在window上触发，当无法加载图像时在< img>元素上触发，当无法加载嵌入内容时在< object>内容上触发
• select：当用户选择文本框（< input>或< textarea>）中的一或多个字符时触发。
• resize：当窗口或框架的大小变化时在window或框架上面触发。
• scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。

多数这些事件都与window对象或表单控件相关。

load事件

不冒泡
不能取消默认事件

Javascript中最常用的一个事件就是load。当页面完全加载后（包括所有图像、Javascript文件、CSS文件等外部资源），就会触发window上面的load事件。
有两种定义onload事件处理程序的方法：

• 通过javascript指定
• HTML级事件处理程序，即为body元素添加一个onload属性。

图像上面也可以触发load事件，无论是在DOM元素中的图像元素还是HTML中的图像元素。因此可以在HTML中为任何图像指定onload事件处理程序：

<img src="smile.gif" onload="alert('image loaded')">

当然，同样的功能也可以用javascript完成。

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

EventUtil.addHandler(window,"load",function(){
    var image = document.createElement("img");
    EventUtil.addHandler(image,"load",function(event){
        event = EventUtil.getEvent(event);
        alert(EventUtil.getTarget(event).src);
    });
    document.body.appendChild(image);
    image.src = "smile.gif";
})

上面例子中使用的EventUtil是之前定义的跨浏览器的定义事件处理程序和获取事件对象的接口。

这个例子中，首先为window指定了onload事件处理程序。原因在于，我们想向DOM中添加一个新元素，所以必须确定页面已经加载完毕——如果在页面加载前操作document.body会导致错误。
然后，创建了一个新的图像元素，并设置了其onload事件处理程序。
最后将这个图像添加到页面中，还设置了它的src属性。这里有一点要额外注意，新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。

还有一些元素也以非标准的方式支持load事件：
< script>元素也会触发load事件，以便开发人员确定动态加载的javascript文件是否加载完毕。
与图像不同，只有在设置了< script>元素的src属性并将该元素添加到文档后，才会开始下载Javascript文件。换句话说，对于< scri