Javascript高级编程学习笔记（61）—

UI事件

UI事件是指那些不一定与用户操作有关的事件

这些事件在DOM规范出现之前，都是以各种不同的形式存在于不同的浏览器

而在DOM事件中为了保证向后兼容，现有的UI事件如下：

DOMActivate：表示元素已经被用户操作激活，该事件在DOM3规范中被废弃，因此不建议使用
load：当页面完全加载后在window对象上触发，图像加载完毕在 img 标签触发，嵌入内容加载完毕在 object 元素触发
unload：页面完全卸载后在 window 对象触发，框架卸载完成在框架集上触发，嵌入内容卸载完成在 object 元素触发
abort：在用户停止下载时，若嵌入内容没有加载完则在 object 元素触发
error：JS发生错误时在 window 上触发，无法加载图像在 img 元素触发，无法加载嵌入内容在 object 内容触发
select：用户选中文本框（input、texterea）的一个或多个字符时触发
resize：当窗口或框架的大小发生变化时触发
scroll：用户滚动带滚动条的内容时触发

以上事件除了 DOMActivate 事件之外，在DOM2级规范中都归于HTML事件

检测以上特性，可使用以下代码：

var isSupported = document.implementation.hasFeature("HTMLEvents","2.0");

只有根据DOM2级标准实现的才会返回true ，以非标准方式支持以上事件的浏览器则会返回false

检测DOM3级事件：

var isSupported = document.implementation.hasFeature("UIEvents","3.0");

load事件

load事件作为JS中最常用的事件，当页面完全加载后，就会触发window上的load事件

而定义load事件有以下两种方式：

window.onload = function(){

    alert("loaded");

}// 这里没有做浏览器兼容，兼容请参考我前面的文章

或：

<!DOCTYPE html>

<html>

    <head>

        <title>Load Event Example</title>

    </head>

    <body onload="alert('loaded')">

    <body>

</html>

一般来说，在window上面发生的任何事件都可以在 body 元素中通过响应特性来指定

因为在HTML中无法访问 window 元素。实际上这只是一种向后兼容的权宜之计，但是所有浏览器都能很好地支持这种方式

不过最好还是使用第一种的JS的方式来指定

PS：DOM2规范指出应该在 document 而非 window 上面触发load事件，但是所有浏览器都在window上事件了 load事件以保证向后兼容

图像上也可以触发 load 事件，若我们需要在图像加载完成时给出提示，需要注意一点：

在我们创建新的图像元素后需要先添加事件处理程序然后再指定 img 元素的src属性

PS：最重要的一点是：新图像元素不一定要添加到文档后才开始下载，只要设置了src属性就会开始下载

同样的功能也可以使用 DOM0 中的 image 对象实现

两者区别在于 image 对象无法添加到文档中，但是也有部分浏览器将 Image 对象以 img 元素实现

但是只有部分浏览器这样做，所以最好将这两者加以区分

在主流现代浏览器中，<script>元素也会触发load事件

不过新建的 script 元素只有在指定了 src 属性并且将该元素添加到文档中后才会开始下载

所以对于 script 元素指定事件处理程序的先后顺序就不重要了

此外，IE和Opera的 link 元素也支持load事件，以供开发人员确定样式表是否加载完成

unload事件

与load事件对应的是unload事件

其在文档被完全卸载后触发，或者从一个页面切换到另外一个页面也会触发该事件

利用这个事件最多的情况就是清除引用，以避免内存泄漏

指定方式和 load 事件一样

不过不管是那种指定方式

都需要小心 unload 事件处理程序中的代码

因为是在页面卸载完成后才触发，所以页面加载后存在的对象此时都不一定存在了

所以在 unload 事件处理程序中操作DOM节点或者元素样式就会导致错误

resize事件

当浏览器窗口被调整到一个新的宽度或高度时就会触发resize事件

指定方式这里不再赘述

需要注意的是，不同浏览器的resize触发机制不同

除火狐之外的浏览器窗口每改变1px 都会触发一次，随着窗口大小的改变不断触发

而火狐只有在用户停止调整窗口大小时才会触发

PS：浏览器窗口最大化最小化也会触发 resize 事件

scroll事件

虽然 scroll 事件在window 上触发，但是其实际表示的时页面中相应元素的变化

在混杂模式下可以通过 body 的 scrollLeft、scrollTop 来监测

而在标准模式下则会通过 html 元素来反映这一变化

window.onscroll = function(event){

    if(document.compatMode ==="CSS1Compat"){

        alert(document.documentElement.scrollTop);

    } else {

        alert(document.body.scrollTop);

    }

}

与resize事件类似，scroll 事件也会在滚动期间重复触发，所以需要尽量保持事件处理程序代码的简单