JavaScript事件类型——UI事件

UI （User Interface）事件，当用户与页面上的元素交互时触发。
多数事件都与 window 对象或表单控件相关。

现有 UI 事件主要包括：

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

---

1. load 事件

JavaScript 中非常常用的一个事件 load。当页面完全加载后（包括图像、JS文件、CSS文件等外部资源），就会触发 window 上面的 load 事件。

定义 onload 事件处理程序的方式：

EventUtil.addHandler(window, "load", function(event) {
	alert("Loaded!");
});

这是通过 JavaScript 来指定事件处理程序的方式，使用了前面实现的跨浏览器的 EventUtil 对象。

另外，图片也可以触发 load 事件。

例如：

var image = document.getElementById("myImage");
EventUtil.addHandler(image, "load", function(event) {
	event = EventUtil.getEvent(event);
	alert(EventUtil.getTarget(event).src);
});

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

EventUtil.addHandler(window, 'load', function() {
    alert("window loaded!");
    var image = document.createElement('img');
    alert("img created!");
    EventUtil.addHandler(image, 'load', function(event) {
        event = EventUtil.getEvent(event);
        alert(EventUtil.getTarget(event).src);
    });
    document.body.appendChild(image);
    image.src = "hello.jpg";
});

在上面的例子中，首先为 window 指定 onload 事件处理程序，因为我们向 DOM 中添加新元素时，需要操作 document.body，所以要确保页面已经加载完毕。
然后我们创建一个新的图像，并设置它的 onload 事件处理程序，最后将图像添加到页面中，还设置了它的 src 属性。
上面的例子有一点需要注意：新图像元素不一定要从添加到文档后才开始下载，只要设置了 src 属性就会开始下载。

还有一些元素以非标准的方式支持 load 事件。

在 IE9+、Firefox、Opera、Chrome 和 Safari3+ 及更高版本中，<script> 元素也会触发 load 事件，以便开发人员确定动态加载的 JavaScript 文件是否加载完毕。
与图像不同的是，只有在设置了 <script> 元素的 src 属性，并将该元素添加到文档后，才会开始现在 JavaScript 文件，因此对于 <script> 元素而言，指定 src 属性和指定事件处理程序的先后顺序不重要。

另外 IE 和 Opera 还支持 <link> 元素的 load 事件，以便开发人员确定样式表是否加载完毕，用法与 <script> 相同。

---

2. unload 事件

与 load 事件对应，在文档被完全卸载后触发。
只要用户从一个页面切换到另一个页面，就会触发 unload 事件。
利用这个事件最多的情况是清除引用，以避免内存泄漏。
用法与 load 类似，就不详细写了。

需要注意的是：

1. 传入事件处理程序中的 event 对象在兼容 DOM 的浏览器中只包含 target 属性（值为 document）。
2. 既然 unload 事件是在一切都被卸载之后才触发，那么在页面加载后存在的那些对象，此时不一定还存在。则此时操作 DOM 节点或者元素的样式可能会导致错误。

---

3. resize 事件

当浏览器窗口被调整的一个新的高度或宽度时，就会触发 resize 事件。
这个事件在 window 上面触发。
添加事件处理程序的方式仍然与 load 相同。
需要注意的是

1. 不同的浏览器有不同的机制，因此最好不要在 resize 事件处理程序中加入大计算量的代码。
2. 与其他发生在 window 上的事件类似，在兼容 DOM 的浏览器中，传入事件处理程序的 event 对象只包含 target 属性，值为 document。

---

4. scroll 事件

虽然 scroll 事件是在 window 对象上发生的，但它实际表示的则是页面中相应元素的变化。
与 resize 事件类似，scroll 事件也会在文档滚动期间被重复触发，所以尽量保持事件处理程序的代码简单。