diff options
Diffstat (limited to 'files/zh-cn/orphaned/web/guide/events')
4 files changed, 417 insertions, 0 deletions
diff --git a/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html b/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..52471bde8e --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/events/event_handlers/index.html @@ -0,0 +1,181 @@ +--- +title: DOM 事件回调 +slug: orphaned/Web/Guide/Events/Event_handlers +translation_of: Web/Guide/Events/Event_handlers +original_slug: Web/Guide/Events/Event_handlers +--- +<h2 id="概要">概要</h2> + +<p>Web平台提供了多种方式来获取 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events">DOM events</a> 的通知。两种常见的风格是：广义 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 和一组特定的<em><strong>on-event</strong></em>处理器。本页重点介绍后者如何工作的细节。</p> + +<h3 id="注册on-event_处理器">注册<em>on-event</em> 处理器</h3> + +<p><em><strong>on-event </strong></em>处理器是由DOM元素提供的一组属性，以帮助管理元素如何对事件反应。元素可以使可交互性的（例如链接，按钮，图像，表单）或者非可交互的（比如基本文档本身等）。事件是异性行为，像点击，检测到按下按键，获得焦点等。<em><strong>on-event </strong></em>事件通常被相应地命名，诸如onclick，onkeypress，onfocus等。</p> + +<p>你可以为一个给定的对象的某个特定事件（比如{{event("click")}}）指定一个 <code>on<...></code> 事件处理器，使用以下几种不同的方式：</p> + +<ul> + <li>在元素上使用 HTML {{Glossary("attribute")}} <code>on<em>{eventtype}</em></code> ，例如：<br> + <code><button <u>onclick="return handleClick(event);"</u>></code>,</li> + <li>或者通过 JavaScript 设置相应的属性（ {{Glossary("property/JavaScript", "property")}}），例如：<br> + <code>document.getElementById("mybutton")<u>.onclick = function(event) { ... }</u></code>.</li> +</ul> + +<p>注意，每个对象对于给定的事件<strong>只能有一个</strong>事件处理器（尽管该处理程序可以调用多个子处理器）。这就是为什么{{domxref("EventTarget.addEventListener", "addEventListener()")}} 通常是获得事件通知的更好方法，特别是当你希望彼此独立地应用各种事件处理程序时，即使对于相同的事件和/或相同的元素也是如此。</p> + +<p>还要注意，事件处理器是自动调用的，而不是程序员的意志(尽管你可以使用像 <code>mybutton.onclick(myevent); )。</code>因为它们更多地用作可以<strong>分配</strong>真实处理器函数的占位符。</p> + +<h3 id="非元素对象">非元素对象</h3> + +<p>事件处理器也可以使用属性设置在生成事件的许多非元素对象上， 包括{{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, 和其他等等，例如：</p> + +<pre><code>xhr.onprogress = function() { ... }</code></pre> + +<h2 id="细节">细节</h2> + +<h3 id="HTML的_on<...>_属性值_和相应JavaScript">HTML的 on<...> 属性值 和相应JavaScript</h3> + +<p>通过 on<...> 元素属性注册的处理程序将通过相应的 on<...> 对象属性可用，相反，则不可用：</p> + +<pre><code><div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div> + +<script> +window.onload = function () { + var div = document.getElementById("a"); + console.log("Attribute reflected as a property: ", div.onclick.toString()); + // Prints: function onclick(event) { alert('old') } + div.onclick = function() { alert('new') }; + console.log("Changed property to: ", div.onclick.toString()); + // Prints: function () { alert('new') } + console.log("Attribute value is unchanged: ", div.getAttribute("onclick")); + // Prints: alert('old') +} +</script></code></pre> + +<p>由于历史原因，{{HTMLElement("body")}} 和 {{HTMLElement("frameset")}} 元素中的某些元素属性/对象属性实际上是在其父 {{domxref("Window")}} 对象上设置了事件处理器(这些 HTML 命名: <code>onblur</code>, <code>onerror</code>, <code>onfocus</code>, <code>onload</code>, <code>onscroll</code>.)。</p> + +<h3 id="事件处理器的参数，this_绑定和返回值">事件处理器的参数，<code>this</code> 绑定和返回值</h3> + +<p>当事件处理程序被指定为 <strong>HTML 属性</strong>，指定的代码被包装在有 <strong>以下参数 </strong>的函数中：</p> + +<ul> + <li><code>event</code> - 对于所有的事件处理器，除了 {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> + <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> 对于 {{domxref("GlobalEventHandlers.onerror", "onerror")}} 事件处理器。注意，<code>event</code> 参数实际上包含字符串的错误消息。</li> +</ul> + +<p>当事件处理器被调用，事件处理器内部的 <code>this</code> 关键字被设置为注册该事件处理器的 DOM 元素。更多信息查看 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler">this 关键字文档</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_in%E2%80%93line_event_handler"> </a>.</p> + +<p>事件处理器的返回值决定了事件是否被取消。返回值的具体处理方式取决于事件的类型，更多信息查看 <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> + +<h3 id="什么时候调用事件处理程序">什么时候调用事件处理程序</h3> + +<p>TBD (non-capturing listener)</p> + +<h3 id="术语">术语 </h3> + +<p>术语 <strong>事件处理器（event handler）</strong> 可用于指：</p> + +<ul> + <li>注册的事件通知的任何函数或对象，</li> + <li>或更具体地说，是通过HTML中的 <code>on... </code>属性或web API中的属性来注册事件监听器的机制，例如 <code><button onclick="alert(this)"> </code>或 <code>window.onload = function() { /* ... */ }</code>。</li> +</ul> + +<p>在讨论各种监听事件的方法时：</p> + +<ul> + <li> <strong>事件侦听器（event listener）</strong>是指通过 {{domxref("EventTarget.addEventListener()")}} 注册的函数或对象,</li> + <li>而<strong>事件处理器（event handler）</strong>是指通过 <code>on...</code> 属性注册的函数。</li> +</ul> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Firefox_9中的事件处理器的变动">Firefox 9中的事件处理器的变动</h3> + +<p>为了更好地匹配规范，并提高跨浏览器兼容性，在Gecko 9.0 {{ geckoRelease("9.0") }} 中更改了基本级别事件处理器的实现方式。</p> + +<p>具体来说，在过去，事件处理器没有被正确地实现为标准的IDL属性。在 Gecko 9.0，这一点被改变。因此，Gecko的事件处理程序的某些行为已经改变。特别地，它们现在含有为标准IDL属性行为的所有特性。在大多数情况下，这不应该影响网页或附加内容。然而，还有一些具体的事情需要注意。</p> + +<h4 id="检测事件处理程序属性的存在">检测事件处理程序属性的存在</h4> + +<p>你可以使用 JavaScript 的 <code><a href="https://developer.mozilla.org/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in">in</a> </code>运算符来检测事件处理器属性（例如，onload）的存在。例如：</p> + +<pre class="brush: js">if ("onsomenewfeature" in window) { + /* do something amazing */ +} +</pre> + +<h4 id="事件处理程序和原型">事件处理程序和原型</h4> + +<p>您不能设置或访问DOM原型对象上任何IDL定义的属性的值，这意味着您不能更改 <code>Window.prototype.onload</code>。在过去，事件处理程序（onload等）没有被实现为Gecko中的IDL属性，所以可以这样做，而现在你不能这样做，这提高了兼容性。</p> diff --git a/files/zh-cn/orphaned/web/guide/events/index.html b/files/zh-cn/orphaned/web/guide/events/index.html new file mode 100644 index 0000000000..1addfdd634 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/events/index.html @@ -0,0 +1,55 @@ +--- +title: Event developer guide +slug: orphaned/Web/Guide/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - NeedsUpdate + - TopicStub +translation_of: Web/Guide/Events +original_slug: Web/Guide/Events +--- +<p>{{draft()}}</p> + +<p>事件(Event)是指一种用于处理在网页的生命周期中发生的各种事件的异步调用的设计模式，也指一些不同种类事件的命名、描述和使用。</p> + +<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">概述</a> 中提供了对设计模式的介绍和现代Web浏览器中事件和处理程序的概述。</p> + +<p>在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">自定义事件</a> 中介绍了如何创建自定义事件、注册监听自定义事件和如何在代码中触发自定义事件</p> + +<p>接下来的内容描述了如何在Web浏览器中使用不同类型的事件。不幸的是，这些事件是随着Web浏览器的发展逐一定义的，所以，目前还没有一个令人满意的系统描述。</p> + +<p><strong>设备</strong>可以在Web浏览器运行时触发事件，例如，由于其在现实世界中的位置和方向的变化，在 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> 和 <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a> 被讨论，这与设备垂直方向的变化是不同的，但是类似的。</p> + +<p>浏览器显示的 <strong>窗口</strong> 也可以触发事件, 例如，如果用户最大化窗口或以其他方式更改窗口大小。</p> + +<p>网页的<strong>进程加载</strong>可以触发事件，响应下载，解析和呈现网页给用户的不同步骤的完成状态。</p> + +<p>用户与网页内容的<strong>交互</strong>可能触发事件。用户交互触发的事件在浏览器设计的早期阶段发生，包括一个复杂的系统，定义了事件将被调用的顺序以及该序列可以被控制的方式。不同类型的用户交互驱动的事件包括：</p> + +<ul> + <li>原始的 'click' 事件,</li> + <li>鼠标事件,</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events"><font><font>鼠标手势事件</font></font></a><font><font>，和</font></font></li> + <li><font><font>这两个</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events"><font><font>触摸事件</font></font></a><font><font>和早些时候</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)"><font><font>Mozilla的实验性触摸事件</font></font></a><font><font>，现在已废弃。</font></font></li> +</ul> + +<p> </p> + +<p><font><font>该</font></font><strong><font><font>网页的修改</font></font></strong><font><font>结构或内容可能会引发一些事件，如解释的</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events"><font><font>突变事件页</font></font></a><font><font>，但使用这些事件也有利于较轻的被弃用</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><font><font>突变观察员</font></font></a><font><font>的做法。</font></font></p> + +<p><font><font>嵌入在HTML文档中</font><font>的</font></font><strong><font><font>媒体流</font></font></strong><font><font>可能会触发某些事件，如</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Media_events"><font><font>媒体事件</font></font></a><font><font>页面中所述。</font></font></p> + +<p>网页发出的<strong>网络请求</strong>可能会触发一些事件。</p> + +<p>还有许多网页浏览器定义的其他事件还不包括在本指南中。</p> + +<div class="note"> +<p>注意: 本是件开发指南还需要大量的工作，结构需要重新组织，页面重写。我们希望你所需要知道的一切事情都会在这里。</p> +</div> + +<h2 id="Docs">Docs</h2> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html new file mode 100644 index 0000000000..b3c1f357a0 --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/events/orientation_and_motion_data_explained/index.html @@ -0,0 +1,45 @@ +--- +title: Orientation 和 motion 数据解释 +slug: orphaned/Web/Guide/Events/Orientation_and_motion_data_explained +translation_of: Web/Guide/Events/Orientation_and_motion_data_explained +original_slug: Web/Guide/Events/Orientation_and_motion_data_explained +--- +<p>{{ Draft() }}</p> +<h2 id="总言" style="line-height: 30px; font-size: 2.14285714285714rem;">总言</h2> +<p>当我们要使用orientation和motion事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。</p> +<div class="warning" style="font-size: 14px;"> + <p><strong>警告:</strong> 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.</p> +</div> +<h2 id="坐标系" style="line-height: 30px; font-size: 2.14285714285714rem;">坐标系</h2> +<p>坐标系是一种描述物体位置的系统，它包含三个轴(X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。</p> +<h3 id="地球坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">地球坐标系</h3> +<p>地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。</p> +<ul> + <li>X轴沿着地平面，垂直于Y轴，向东为正，向西为负。</li> + <li>Y轴沿着地平面，向北(北极，不是磁场北)为正，向南为负。</li> + <li>Z轴垂直于地平面，想象成一条线连接着设备跟地心。背对地心的方向为正，指向地心的方向为负。</li> +</ul> +<h3 id="设备坐标系" style="line-height: 24px; font-size: 1.71428571428571rem;">设备坐标系</h3> +<p>设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。</p> +<p>,<img alt="axes.png" class="internal default" src="/@api/deki/files/5694/=axes.png"></p> +<ul> + <li>x轴沿着屏幕表面，向右为正，向左为负。</li> + <li>y轴沿着屏幕表面，向上为正，向下为负。</li> + <li>z轴垂直屏幕表面或键盘，远离屏幕的方向为正。</li> +</ul> +<div class="note"> + <span style="line-height: 1.5;">注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用</span><span style="line-height: 1.5; font-family: 'Courier New', 'Andale Mono', monospace;">orientationchange事件。</span></div> +<h2 id="旋转(Rotation)" style="line-height: 30px; font-size: 2.14285714285714rem;">旋转(Rotation)</h2> +<p>旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。</p> +<h3 id="Alpha" style="line-height: 24px; font-size: 1.71428571428571rem;">Alpha</h3> +<p>围绕z轴旋转设备将使alpha角度值发生变化:</p> +<p><img alt="alpha.png" class="internal default" src="/@api/deki/files/5695/=alpha.png"></p> +<p><span style="line-height: 1.5;">alpha为</span><span style="line-height: 1.5;">0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。</span></p> +<h3 id="Beta" style="line-height: 24px; font-size: 1.71428571428571rem;">Beta</h3> +<p>围绕x轴旋转，也就是前后旋转，将使beta值发生改变:</p> +<p><img alt="beta.png" class="internal default" src="/@api/deki/files/5696/=beta.png"></p> +<p><span style="line-height: 1.5;">当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到</span><span style="line-height: 1.5;">180°，向后翻转递减到-180°。</span></p> +<h3 id="Gamma" style="line-height: 24px; font-size: 1.71428571428571rem;">Gamma</h3> +<p><span style="line-height: 1.5;">当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:</span></p> +<p><img alt="gamma.png" class="internal default" src="/@api/deki/files/5697/=gamma.png"></p> +<p><span style="line-height: 1.5;">gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到</span><span style="line-height: 1.5;">90° ，向左翻转时，递减到-90°。</span></p> diff --git a/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html new file mode 100644 index 0000000000..88a0ff78ec --- /dev/null +++ b/files/zh-cn/orphaned/web/guide/events/overview_of_events_and_handlers/index.html @@ -0,0 +1,136 @@ +--- +title: Overview of Events and Handlers +slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers +translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers +original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers +--- +<div class="summary"> +<p>事件和事件处理的概述解释了用于响应在Web页面时间发生的事件的代码设计模式，并总结了由现代Web浏览器处理的此类事件的类型。</p> +</div> + +<p> </p> + +<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p> + +<p>事件和事件处理提供核心技术JavaScript的反应时间的一个网页的用户保持开放的过程中发生的事件，包括发生在一个页面正在准备显示事件，与网页的内容由于用户交互事件，到设备上浏览器运行相关的事件，或事件由于其他原因如媒体流的播放或动画时间。</p> + +<p> </p> + +<p>事件和事件处理成为Web编程的核心，添加了浏览器的语言，伴随着浏览器从呈现和加载页面呈现到事件驱动、基于回流的页面渲染的转换结构的切换。最初，浏览器等待，直到它们接收到与页面相关的所有资源，解析、处理、绘制并向用户呈现页面。显示的页面保持不变，直到浏览器请求一个新页面为止。随着动态页面呈现的改变，浏览器在处理、绘制、呈现内容和等待一些新的事件触发之间不断循环。事件触发器包括完成网络上资源的加载，例如，下载一个现在可以在屏幕上绘制的图像，完成由浏览器解析资源的过程，例如处理页面的HTML内容、用户与页面内容的交互，例如单击按钮。道格拉斯克罗克福德的几个讲座有效地解释了这种变化，特别是他说的，一个不方便的API：DOM的理论，解释了原来的浏览器流流量的变化</p> + +<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> + +<p>到事件驱动的浏览器。后一种方法将最后一个步骤从单个流变为一个永久循环，在接下来的步骤中，等待和处理新事件的发生。后一种方法的创新允许在资源尚未获得的情况下部分地呈现页面；该方法还允许使用JavaScript驱动的事件驱动操作。（可以从多个渠道获得，包括这一个）。目前，JavaScript代码的所有执行环境都使用事件和事件处理。</p> + +<h2 id="事件设计模式">事件设计模式</h2> + +<p>事件系统的核心是简单的编程设计模式。模式从一个事件和一个事件的协议开始：</p> + +<ul> + <li>事件使用的名称字符串，</li> + <li>用于表示该事件的关键属性的数据结构的类型，以及</li> + <li>将“发出”该事件的JavaScript对象。</li> +</ul> + +<p>该模式的实现</p> + +<ul> + <li>定义一个JavaScript函数，它作为一个参数，被商定的数据结构，以及</li> + <li>使用将发出事件的对象使用名称字符串注册该函数。</li> +</ul> + +<p>该功能称为“听众”或“与名称interchangibly处理”。这一模式可以很容易地使用完全自定义代码，如文章中关于自定义事件的说明所述。这种模式也被现代Web浏览器所使用，它定义了响应用户输入或浏览器活动而发出的许多事件。</p> + +<p>现代Web浏览器使用标准化方法跟踪事件模式。浏览器使用的数据结构对于事件的性质，从eventprototype对象派生对象。浏览器使用为功能，将处理这些数据结构的方法称为addEventListener期望作为参数的字符串类型的名称和事件处理函数的注册方法。最后，浏览器定义了大量的对象作为事件发射器，并定义了由对象生成的各种各样的事件类型。</p> + +<h2 id="Button_Event_Handler" name="Button_Event_Handler">按钮的事件处理程序演示</h2> + +<p>例如，浏览器按钮元素意在发出事件命名为'click'响应鼠标单击或当显示在触摸敏感表面，一个手指单击。我们可以在HTML页面中定义一个按钮：</p> + +<pre class="brush: html"><button id="buttonOne">Click here to emit a 'click' event</button></pre> + +<p>而且，在JavaScript代码中，我们可以首先定义一个函数来监听“click”事件：</p> + +<pre class="brush: js">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 ); +};</pre> + +<p>第二，我们使用按钮对象注册我们的函数，无论是在脚本方面，还是使用HTML页面的DOM（文档对象模型）表示：</p> + +<pre class="brush: js">var buttonDOMElement = document.querySelector('#buttonOne'); +buttonDOMElement.addEventListener('click', example_click_handler);</pre> + +<p>或在HTML页面中添加功能的“onclick”属性的值，虽然这第二种方法通常只用于非常简单的网页。</p> + +<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> + +<p>这段代码依赖，有一种叫做“点击”事件，称任何监听协议（或处理）与一个事件对象参数的函数（实际上，在这种情况下，衍生的MouseEvent对象），将使用HTML按钮元素在用户交互。代码没有明显影响到用户的按钮，可以通过将鼠标指针放在HTML按钮，点击鼠标左键，或用手指或手写笔点上面的HTML按钮屏幕互动；当这种情况发生时，该<code>buttonDOMElement</code> JavaScript对象会调用example_click_handler功能与事件对象作为参数。函数将依次执行程序员选择的任何操作，在这种情况下，打开一个HTML警报对话框。注意，处理程序对‘ev’对象有访问权，因为它作为参数传递；对象有关于事件的信息，特别是事件发生的时间。</p> + +<p>作为第二个例子，集成到Web页面中的许多现代JavaScript被封装到事件函数调用中，以确保代码只在HTML被处理并可用于更改或装饰时执行。例如，代码可以附加为：</p> + +<pre class="brush: js">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); + +</pre> + +<p>所以，此代码只会在文档对象发出“DOMContentLoaded“事件因为HTML解析完毕和javascript对象创建代表每个HTML文档的节点执行。注意，在这个例子中，代码甚至没有为函数命名事件参数，因为代码永远不需要使用描述事件的数据结构；相反，代码只需要等待运行，直到事件发生之后。</p> + +<p>因此，该模式易于学习和实现。事件的困难来自于学习在现代Web浏览器中生成的各种各样的事件。学习如何编写处理程序函数也有一些微妙之处，因为这些代码异步工作，可能会重复运行，但情况略有不同。</p> + +<h2 id="值得注意的事件">值得注意的事件</h2> + +<p>Web浏览器定义了大量事件，所以列出所有事件是不现实的。事件引用试图维护现代Web浏览器中使用的标准事件列表。</p> + +<p>一般来说，我们可以根据事件的对象来区分不同类型的事件，包括：</p> + +<ul> + <li>窗口window对象，如由于调整浏览器大小，</li> + <li>window.screen对象，如由于设备的方向变化，</li> + <li>文档document对象，包括页面的加载、修改、用户交互和卸载，</li> + <li>DOM（文档对象模型）树中的对象，包括用户交互或修改，</li> + <li>XMLHttpRequest对象用于网络的要求，和</li> + <li>当媒体流播放器改变状态时，诸如音频audio和视频video等媒体对象。</li> +</ul> + +<p>虽然这个列表目前不完整。</p> + +<p>一些值得注意的事件是：</p> + +<div class="note"> +<p><strong>Note: </strong>这份清单将需要相关的工作；这项工作正在等待一些关于文件的全球重组工作。这还需要找到在页面加载期间所涉及到的事件的良好解释，如部分讨论在 <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/">this web page</a> 或 <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> +</div> + +<ul> + <li>当页面完成渲染时，全局对象窗口window发出一个名为“load”的事件，这意味着所有资源都已下载并执行，以便运行脚本并显示图像，</li> + <li>当浏览器窗口window的高度或宽度被用户更改时，全局对象窗口发出一个称为“resize”的事件，</li> + <li>DOM文档对象代表了HTML文件发出一个事件被称为”DOMContentLoaded“当文档加载完毕，</li> + <li>当鼠标指针位于HTML页面的DOM节点顶部时，当用户按下鼠标按钮时，如div或button的DOM节点对象发出一个名为“click”的事件。</li> +</ul> + +<h2 id="事件对象层次结构">事件对象层次结构</h2> + +<p>Web浏览器定义了许多不同类型的事件。每个定义包括，作为数据结构传递给处理函数，一个对象继承自EventPrototype对象。</p> + +<p>事件对象类层次结构的部分图是：</p> + +<div class="note"> +<p><strong>Note:</strong> 下面的图标是不完整的.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> + +<p>Web API文档包含定义事件对象的页面，该事件对象还包括事件对象已知的DOM事件子类。</p> + +<h2 id="文档">文档</h2> + +<p>下面是三个链接对MDN（Mozilla开发者网络）网站程序员从事于事件相关的开发是特别有用的：</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> 是 <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>的一部分,</li> + <li><a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> + <li>Web API 文档中的 <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> 对象.</li> +</ul> |