html页面加载完成后会触发的事件_H5 事件

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预定义事件，以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察者模式的模型，支持页面的行为与页面的外观之间的松散耦合。

事件最早是在IE3和NetscapeNavigator 2中出现的，当时是作为分担服务器运算负载的一种手段。在IE4和Navigator4发布时，这两种浏览器都提供了相似但不相同的API，这些API并存经过了好几个主要版本。DOM2级规范开始尝试以一种符合逻辑的方式来标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都实现了"DOM2级事件"模块的核心部分。IE8是最后一个仍然使用其专有事件系统的主要浏览器。

事件流

当浏览器发展到第四代时，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？要明白这个问题问的是什么，可以想象画在一张纸上的一组同心圆。如果把手指放在圆心上，那么指向的不是一个圆，而是纸上的所有圆。两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，都认为单击事件不仅仅发生在按钮上。也就是说，单击按钮的同时，也单击了按钮的容器元素，甚至也单击了整个页面。

事件流描述的是从页面中接收事件的顺序。但有意思的是，IE和Netscape开发团队居然提出了差不多是完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。

事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5及更早版本中的事件冒泡会跳过元素(从

直接跳到document)。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

事件捕获

NetscapeCommunicator团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用以在于在事件到达预定目标之前捕获它。虽然事件捕获是Netscape Communicator唯一支持的事件流模型，但IE9、Safari、Chrome、Opera和Firefox目前也支持这种事件流模型。尽管"DOM2级事件"规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

DOM事件流

"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

事件处理程序

事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover，嗾使事件的名字。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以"on"开头，因此click事件的事件处理程序就是onclick、load事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种。

HTML事件处理程序

某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。例如，要在按钮被单击时执行一些JavaScript，可以像下面这样编写代码：

当单击这个按钮时，就会显示一个警告框。这个操作是通过指定onclick特性并将一些JavaScript代码作为它的值来定义的。由于这个值是JavaScript，因此不能在其中使用未经转义的HTML语法字符，例如和号(&)、双引号("")、小于号()。为了避免使用HTML实体，这里使用了单引号。如果想要使用双引号，那么既要将代码改成如下所示：

在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。如下面的例子所示：

在这个例子中，单击按钮就会调用showMessage()函数。这个函数是在一个独立的

做出来的效果就是：

要阻止事件的默认行为，可以使用preventDefault()方法。例如，连接的默认行为就是在被单击时会导航到其href特性指定的URL。如果项阻止连接导航这一默认行为，那么通过连接的onclick事件处理程序就可以取消它，如：

varlink=document.getElementById('myLink');

link.οnclick=function(){

if(new Date().getHours() > 15){

event.preventDefault();

}

}

只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。

另外，stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。例如，直接添加到一个按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body上面的事件处理程序，如：

varlink=document.getElementById('myLink');

link.οnclick=function(){

alert('Link clicked!');

event.preventDefault();

event.stopPropagation();

}

document.body.οnclick=function(){

alert("Body clicked!");

}

对于这个例子而言，如果步调用stopPropagation()，就会在单击连接时出现两个警告框。调用stopPropagation()后click事件就不会传播到document.body，因此就不会触发注册在这个元素上的onclick事件处理程序。

事件对象的eventPhase属性，可以用来确定事件当前位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么eventPhase等于1；如果事件处理程序处于目标对象上，则eventPhase等于2；如果是在冒泡阶段调用的事件处理程序，eventPhase等于3。这里要注意的是，尽管"处于目标"发生在冒泡阶段，但eventPhase仍然一直等于2。

事件类型

Web浏览器中可能发生的事件有很多类型。如前所述，不同的事件类型具有不同的信息，而"DOM3级事件"规定了以下几类事件。

UI(UserInterface，用户界面)事件，当用户与页面上的元素交互时触发；

焦点事件，当元素获得或失去焦点时触发；

鼠标事件，当用户通过鼠标在页面上执行操作时触发；

滚轮事件，当使用鼠标滚轮(或类似设备)时触发；

文本事件，当在文档中输入文本时触发；

键盘事件，当用户通过键盘在页面上执行操作时触发；

合成事件，当为IME(Input MethodEditor，输入法编辑器)输入字符时触发；

变动事件，当底层DOM结构发生变化时触发；

变动名称事件，当元素或属性名称变动时触发。此类事件已经废弃，没有任何浏览器实现它们。

除了这几类事件之外，HTML5也定义了一组事件，而有些浏览器还会在DOM和BOM中实现其他专有事件。这些专有的事件一般都是根据开发人员需求定制的，没有什么规范，因此不用浏览器的实现有可能也不一致。

DOM3级事件模块在DOM2级事件模块基础上重新定义了这些事件，也添加了一些新事件。包括IE9+在内的所有主流浏览器都支持DOM2级事件。IE9+也支持了DOM3级事件。

UI事件

UI事件指的是那些不一定与用户操作有关的事件。这些事件在DOM规范出现之前，都是以这种或那种形式存在的，而在DOM规范中保留是为了向后兼容。现有的UI事件如下。

DOMActivate：表示元素已经被用户操作(通过鼠标或键盘)激活。这个事件在DOM3级事件中被废弃，但Firefox2+和Chrome支持它。考虑到不同浏览器实现的差异，不建议使用这个事件。

load：当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在元素上触发，或者当嵌入的内容加载完毕时在元素上面触发。

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

abort：在用户停止下载过程时，如果嵌入的内容没有加载完，则在元素上面触发。

error：当发生JavaScript错误时window上面触发，当无法加载如想时在元素上面触发，当无法加载嵌入内容时在元素上面触发，或者当有一或多geese框架无法加载时在框架集上面触发。

select：当用户选择文本框(或)中的一或多个字符时触发。

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

scroll：当用户滚动带滚动条的元素中的内容时，在该元素上面触发。

元素中包含加载页面的滚动条。

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

处理DOMActivate之外，其他事件在DOM2级事件中都归为HTML事件(DOMActivate在DOM2级事件中仍然属于UI事件)。要确定浏览器是否支持DOM2级事件规定的HTML事件，可以使用如下代码：

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

注意，只有根据"DOM2级事件"实现这些事件的浏览器才会返回true。而以非标准方式支持这些事件的浏览器则会返回false。要确定浏览器是否支持"DOM3级事件"定义的事件，可以使用如下代码：

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

load事件

JavaScript中最常用的一个事件就是load。当页面完全加载后(包括所有图像、JavaScript文件、CSS文件等外部资源)，就会触发window上面的load事件。有两种定义onload事件处理程序的方式。第一种方式是使用如下的JavaScript代码：

EventUtil.addHandler(window,"load", function(event){

alert("Loaded!");

});

这是通过JavaScript来指定事件处理程序的方式，使用的前面定义的跨浏览器的EventUtil对象。与添加其他事件一样，这里也给事件处理程序传入了一个event对象。这个event对象中不包含有关这个事件的任何附加信息，但在兼容DOM的浏览器中，event.target属性的值会被设置为document。

第二种指定onload事件处理程序的方式是为

元素添加一个onload特性。一般来说，在window上面发生的任何事件都可以在

元素中通过相应的特性来指定，因为在HTML中无法访问window元素。实际上，这只是为了保证向后兼容的一种权宜之计，但所有浏览器都能很好地支持这种方式，建议尽可能使用JavaScript方式。