当前位置：文江博客知识库简体中文文档 Web Guide Events Overview_of_Events_and_Handlers

Overview of Events and Handlers - Web 开发者指南编辑

事件和事件处理的概述解释了用于响应在Web页面时间发生的事件的代码设计模式，并总结了由现代Web浏览器处理的此类事件的类型。

事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。

事件和事件处理成为Web编程的核心，添加了浏览器的语言，伴随着浏览器从呈现和加载页面呈现到事件驱动、基于回流的页面渲染的转换结构的切换。最初，浏览器等待，直到它们接收到与页面相关的所有资源，解析、处理、绘制并向用户呈现页面。显示的页面保持不变，直到浏览器请求一个新页面为止。随着动态页面呈现的改变，浏览器在处理、绘制、呈现内容和等待一些新的事件触发之间不断循环。事件触发器包括完成网络上资源的加载，例如，下载一个现在可以在屏幕上绘制的图像，完成由浏览器解析资源的过程，例如处理页面的HTML内容、用户与页面内容的交互，例如单击按钮。道格拉斯克罗克福德的几个讲座有效地解释了这种变化，特别是他说的，一个不方便的API：DOM的理论，解释了原来的浏览器流流量的变化

A comparison of the sequential and event-driven browser load sequences.

到事件驱动的浏览器。后一种方法将最后一个步骤从单个流变为一个永久循环，在接下来的步骤中，等待和处理新事件的发生。后一种方法的创新允许在资源尚未获得的情况下部分地呈现页面；该方法还允许使用JavaScript驱动的事件驱动操作。（可以从多个渠道获得，包括这一个）。目前，JavaScript代码的所有执行环境都使用事件和事件处理。

事件设计模式

事件系统的核心是简单的编程设计模式。模式从一个事件和一个事件的协议开始：

事件使用的名称字符串，
用于表示该事件的关键属性的数据结构的类型，以及
将“发出”该事件的JavaScript对象。

该模式的实现

定义一个JavaScript函数，它作为一个参数，被商定的数据结构，以及
使用将发出事件的对象使用名称字符串注册该函数。

该功能称为“听众”或“与名称interchangibly处理”。这一模式可以很容易地使用完全自定义代码，如文章中关于自定义事件的说明所述。这种模式也被现代Web浏览器所使用，它定义了响应用户输入或浏览器活动而发出的许多事件。

现代Web浏览器使用标准化方法跟踪事件模式。浏览器使用的数据结构对于事件的性质，从eventprototype对象派生对象。浏览器使用为功能，将处理这些数据结构的方法称为addEventListener期望作为参数的字符串类型的名称和事件处理函数的注册方法。最后，浏览器定义了大量的对象作为事件发射器，并定义了由对象生成的各种各样的事件类型。

按钮的事件处理程序演示

例如，浏览器按钮元素意在发出事件命名为'click'响应鼠标单击或当显示在触摸敏感表面，一个手指单击。我们可以在HTML页面中定义一个按钮：

<button id="buttonOne">Click here to emit a 'click' event</button>

而且，在JavaScript代码中，我们可以首先定义一个函数来监听“click”事件：

var example_click_handler = function (ev){
    var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype";
    alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind );
};

第二，我们使用按钮对象注册我们的函数，无论是在脚本方面，还是使用HTML页面的DOM（文档对象模型）表示：

var buttonDOMElement = document.querySelector('#buttonOne');
buttonDOMElement.addEventListener('click', example_click_handler);

或在HTML页面中添加功能的“onclick”属性的值，虽然这第二种方法通常只用于非常简单的网页。

这段代码依赖，有一种叫做“点击”事件，称任何监听协议（或处理）与一个事件对象参数的函数（实际上，在这种情况下，衍生的MouseEvent对象），将使用HTML按钮元素在用户交互。代码没有明显影响到用户的按钮，可以通过将鼠标指针放在HTML按钮，点击鼠标左键，或用手指或手写笔点上面的HTML按钮屏幕互动；当这种情况发生时，该buttonDOMElement JavaScript对象会调用example_click_handler功能与事件对象作为参数。函数将依次执行程序员选择的任何操作，在这种情况下，打开一个HTML警报对话框。注意，处理程序对‘ev’对象有访问权，因为它作为参数传递；对象有关于事件的信息，特别是事件发生的时间。

作为第二个例子，集成到Web页面中的许多现代JavaScript被封装到事件函数调用中，以确保代码只在HTML被处理并可用于更改或装饰时执行。例如，代码可以附加为：

var funcInit = function(){
    // user code goes here and can safetly address all the HTML elements from the page
    // since the document has successfully been 'loaded'
}
document.addEventListener('DOMContentLoaded', funcInit);

所以，此代码只会在文档对象发出“DOMContentLoaded“事件因为HTML解析完毕和javascript对象创建代表每个HTML文档的节点执行。注意，在这个例子中，代码甚至没有为函数命名事件参数，因为代码永远不需要使用描述事件的数据结构；相反，代码只需要等待运行，直到事件发生之后。

因此，该模式易于学习和实现。事件的困难来自于学习在现代Web浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处，因为这些代码异步工作，可能会重复运行，但情况略有不同。