这篇翻译不完整。请帮忙从英语翻译这篇文章

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

 

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

事件和事件处理提供核心技术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浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处,因为这些代码异步工作,可能会重复运行,但情况略有不同。

 

 

值得注意的事件

 

Web浏览器定义了大量事件,所以列出所有事件是不现实的。事件引用试图维护现代Web浏览器中使用的标准事件列表。

一般来说,我们可以根据事件的对象来区分不同类型的事件,包括:

  • 窗口window对象,如由于调整浏览器大小,
  • window.screen对象,如由于设备的方向变化,
  • 文档document对象,包括页面的加载、修改、用户交互和卸载,
  • DOM(文档对象模型)树中的对象,包括用户交互或修改,
  • XMLHttpRequest对象用于网络的要求,和
  • 当媒体流播放器改变状态时,诸如音频audio和视频video等媒体对象。

虽然这个列表目前不完整。

一些值得注意的事件是:

 

Note: 这份清单将需要相关的工作;这项工作正在等待一些关于文件的全球重组工作。这还需要找到在页面加载期间所涉及到的事件的良好解释,如部分讨论在  this web page 或 this Stack Overflow question.

  • 当页面完成渲染时,全局对象窗口window发出一个名为“load”的事件,这意味着所有资源都已下载并执行,以便运行脚本并显示图像,
  • 当浏览器窗口window的高度或宽度被用户更改时,全局对象窗口发出一个称为“resize”的事件,
  • DOM文档对象代表了HTML文件发出一个事件被称为”DOMContentLoaded“当文档加载完毕,
  • 当鼠标指针位于HTML页面的DOM节点顶部时,当用户按下鼠标按钮时,如div或button的DOM节点对象发出一个名为“click”的事件。

 

事件对象层次结构

 

Web浏览器定义了许多不同类型的事件。每个定义包括,作为数据结构传递给处理函数,一个对象继承自EventPrototype对象。

事件对象类层次结构的部分图是:

 

Note: 下面的图标是不完整的.

Web API文档包含定义事件对象的页面,该事件对象还包括事件对象已知的DOM事件子类。

文档

下面是三个链接对MDN(Mozilla开发者网络)网站程序员从事于事件相关的开发是特别有用的:

 

 

 

文档标签和贡献者

此页面的贡献者: Song2017, FredWe
最后编辑者: Song2017,