initial commit

4 files changed, 440 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/customevent/customevent/index.html b/files/zh-cn/web/api/customevent/customevent/index.html
new file mode 100644
index 0000000000..e9428f608e
--- /dev/null
+++ b/files/zh-cn/web/api/customevent/customevent/index.html
@@ -0,0 +1,114 @@
+---
+title: CustomEvent()
+slug: Web/API/CustomEvent/CustomEvent
+translation_of: Web/API/CustomEvent/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>The <code><strong>CustomEvent()</strong></code> constructor creates a new {{domxref("CustomEvent")}}.</p>
+
+<p>构造方法 CustomerEvent() 创建一个新的 {{domxref("CustomEvent")}} 对象。</p>
+
+<h2 id="Syntax_语法">Syntax 语法</h2>
+
+<pre class="syntaxbox"> <em>event</em> = new CustomEvent(<em>typeArg</em>, <em>customEventInit</em>);</pre>
+
+<h3 id="Values_参数">Values 参数</h3>
+
+<dl>
+ <dt><em>typeArg</em></dt>
+ <dd>Is a {{domxref("DOMString")}} representing the name of the event.</dd>
+ <dd>一个表示 event 名字的字符串</dd>
+ <dt><em>customEventInit</em>{{optional_inline}}</dt>
+</dl>
+
+<dl>
+ <dd>Is a <code>CustomEventInit</code> dictionary, having the following fields:  一个字典类型参数，有如下字段
+
+ <ul>
+  <li><code>"detail"</code>, optional and defaulting to <code>null</code>, of type any, that is a event-dependant value associated with the event.   可选的默认值是 null 的任意类型数据，是一个与 event 相关的值</li>
+  <li>bubbles 一个布尔值，表示该事件能否冒泡。 来自 {{domxref("Event.Event", "EventInit")}}。注意：测试chrome默认为不冒泡。</li>
+  <li>cancelable 一个布尔值，表示该事件是否可以取消。 来自 {{domxref("Event.Event", "EventInit")}}</li>
+ </ul>
+
+ <div class="note">
+ <p><em>The <code>CustomEventInit</code></em><em> dictionary also accepts fields from the {{domxref("Event.Event", "EventInit")}} dictionary.</em></p>
+
+ <p>CustomerEventInit 字典参数同样接受来自于 Event 类构造函数的 eventInit 字典参数，如下</p>
+
+ <p>bubbles   一个布尔值，表示该事件能否冒泡</p>
+
+ <p>cancelable  一个布尔值，表示该事件是否可以取消</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// add an appropriate event listener
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// create and dispatch the event
+var event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#interface-customevent()','CustomEvent()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.CustomEvent")}}</p>
+
+<h2 id="Polyfill">Polyfill</h2>
+
+<p>You can polyfill the <code>CustomEvent()</code> constructor functionality in Internet Explorer 9 and higher with the following code:</p>
+
+<pre class="brush: js">(function(){
+    try{
+        // a : While a window.CustomEvent object exists, it cannot be called as a constructor.
+        // b : There is no window.CustomEvent object
+        new window.CustomEvent('T');
+    }catch(e){
+        var CustomEvent = function(event, params){
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+            var evt = document.createEvent('CustomEvent');
+
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+
+            return evt;
+        };
+
+        CustomEvent.prototype = window.Event.prototype;
+
+        window.CustomEvent = CustomEvent;
+    }
+})();</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/customevent/detail/index.html b/files/zh-cn/web/api/customevent/detail/index.html
new file mode 100644
index 0000000000..c70a7655bf
--- /dev/null
+++ b/files/zh-cn/web/api/customevent/detail/index.html
@@ -0,0 +1,68 @@
+---
+title: CustomEvent.detail
+slug: Web/API/CustomEvent/detail
+translation_of: Web/API/CustomEvent/detail
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>接口 {{domxref("CustomEvent")}} 的只读属性 <code><strong>detail</strong></code> （详情）返回在初始化事件对象时传递过来的任何类型数据。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"> let myDetail = <em>customEventInstance.detail</em>;</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>事件对象初始化时传递的任何类型数据。</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// add an appropriate event listener
+obj.addEventListener("cat", function(e) { process(e.detail) });
+
+// create and dispatch the event
+let event = new CustomEvent("cat", {
+  detail: {
+    hazcheeseburger: true
+  }
+});
+obj.dispatchEvent(event);
+
+// Will return an object contaning the hazcheeseburger property
+let myDetail = <em>event.detail</em>;
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table" style="height: 49px; width: 1000px;">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-customeventinit-detail','detail')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.CustomEvent.detail")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+</ul>
+
+<p> </p>
diff --git a/files/zh-cn/web/api/customevent/index.html b/files/zh-cn/web/api/customevent/index.html
new file mode 100644
index 0000000000..150dcc5ac3
--- /dev/null
+++ b/files/zh-cn/web/api/customevent/index.html
@@ -0,0 +1,148 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><code>CustomEvent </code>事件是由程序创建的，可以有任意自定义功能的事件。</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<p><strong style="font-weight: bold;">{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}  </strong>创建一个自定义事件。</p>
+
+<h2 id="属性">属性</h2>
+
+<p><strong style="font-weight: bold;">{{domxref("CustomEvent.detail")}} {{readonlyinline}} 任何时间初始化时传入的数据</strong></p>
+
+<p><em>此接口从父接口继承属性, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p>
+
+<h2 id="方法">方法</h2>
+
+<p> </p>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p>初始化一个<code>CustomEvent 对象.如果事件已经被触发,这个方法不起任何作用.</code></p>
+ </dd>
+</dl>
+
+<p><em>此接口从父接口继承方法, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/en-US/docs/Web/API/Event", "Methods")}}</p>
+
+<p> </p>
+
+<h2 id="Method_overview" name="Method_overview">方法概述</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>void <a href="#initCustomEvent()">initCustomEvent</a>(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Attributes" name="Attributes">属性</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Attribute</th>
+   <th>Type</th>
+   <th>Description</th>
+  </tr>
+  <tr>
+   <td><code>detail</code></td>
+   <td><code>any</code></td>
+   <td>当事件初始化时传递的数据</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods" name="Methods">方法</h2>
+
+<h3 id="initCustomEvent()" name="initCustomEvent()">initCustomEvent()</h3>
+
+<p>初始化一个自定义事件的方式和初始化一个标准DOM事件的方式非常相似.</p>
+
+<pre class="eval">void initCustomEvent(
+  in DOMString type,
+  in boolean canBubble,
+  in boolean cancelable,
+  in any detail
+);
+</pre>
+
+<h4 id="Parameters" name="Parameters">参数</h4>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>事件的类型名称.</dd>
+ <dt><code>canBubble</code></dt>
+ <dd>一个布尔值,表明该事件是否会冒泡.</dd>
+ <dt><code>cancelable</code></dt>
+ <dd>一个布尔值,表明该事件是否可以被取消.</dd>
+ <dt><code>detail</code></dt>
+ <dd>当事件初始化时传递的数据.</dd>
+</dl>
+
+<h2 id="构造函数_2">构造函数</h2>
+
+<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">DOM4 规范</a> 添加了对 <code>CustomEvent</code> 构造函数的支持.</p>
+
+<pre>CustomEvent(
+  DOMString type,
+  optional CustomEventInit eventInitDict
+)
+</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>事件的类型名称.</dd>
+ <dt><code>eventInitDict</code></dt>
+ <dd>一个对象,提供了事件的配置信息.查看<a href="#CustomEventInit">CustomEventInit</a>了解更多详情.</dd>
+</dl>
+
+<h4 id="CustomEventInit" name="CustomEventInit">CustomEventInit</h4>
+
+<dl>
+ <dt><code>bubbles</code></dt>
+ <dd>一个布尔值,表明该事件是否会冒泡.</dd>
+ <dt><code>cancelable</code></dt>
+ <dd>一个布尔值,表明该事件是否可以被取消.</dd>
+ <dt><code>detail</code></dt>
+ <dd>当事件初始化时传递的数据.</dd>
+</dl>
+
+<h3 id="CustomEvent_example_usage" name="CustomEvent_example_usage">CustomEvent用法示例</h3>
+
+<p></p>
+
+<pre class="brush: js">// 添加一个适当的事件监听器
+obj.addEventListener("cat", function(e) { process(e.detail) })
+
+// 创建并分发事件
+var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
+obj.dispatchEvent(event)
+</pre>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<h2 id="Specification" name="Specification">规范</h2>
+
+<ul>
+ <li>{{ spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-customevent","DOM4 : Interface CustomEvent","ED") }}</li>
+ <li>{{ spec("http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#interface-CustomEvent","DOM Level 3 Events : CustomEvent","WD") }}</li>
+</ul>
diff --git a/files/zh-cn/web/api/customevent/initcustomevent/index.html b/files/zh-cn/web/api/customevent/initcustomevent/index.html
new file mode 100644
index 0000000000..2b8b12aea8
--- /dev/null
+++ b/files/zh-cn/web/api/customevent/initcustomevent/index.html
@@ -0,0 +1,110 @@
+---
+title: CustomEvent.initCustomEvent()
+slug: Web/API/CustomEvent/initCustomEvent
+translation_of: Web/API/CustomEvent/initCustomEvent
+---
+<p>{{APIRef("DOM")}}{{deprecated_header}}</p>
+
+<p><code><strong>CustomEvent.initCustomEvent()</strong></code> 方法初始化了一个 <code>CustomEvent</code> object. 如果该事件已经被分发出去，则不会在初始化过程中重复触发．</p>
+
+<p>这类对象一定是由 {{ domxref("Document.createEvent()") }} 方法创建的. 该方法被分发之前必须通过{{ domxref("EventTarget.dispatchEvent()") }}方法设置．一旦被分发则，则无法被重新设置．</p>
+
+<div class="note">
+<p><strong>该方法已经作废，不要在新项目中继续使用该方法.</strong></p>
+
+<p>Instead use specific event constructors, like {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. The page on <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a> gives more information about the way to use these.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>);
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code><em>type</em></code></dt>
+ <dd>类型{{domxref("DOMString")}}，事件名称.</dd>
+ <dt><em><code>canBub</code></em><em><code>ble</code></em></dt>
+ <dd>类型{{jsxref("Boolean")}}，事件是否沿着dom树向上冒泡.</dd>
+ <dt><code><em>cancelable</em></code></dt>
+ <dd>类型{{jsxref("Boolean")}}，事件是否可取消.</dd>
+ <dt><em><code>deta</code></em><em><code>il</code></em></dt>
+ <dd>事件初始化时传入的数据.</dd>
+</dl>
+
+<h2 id="Specifications">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('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition, but already deprecated in favor of the use of a constructor, {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">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>{{CompatGeckoDesktop(6)}}</td>
+   <td>9</td>
+   <td>11</td>
+   <td>5.1 (533.3)</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 Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{CompatGeckoMobile(6)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>The constructor to use instead of this deprecated method: {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li>
+</ul>