initial commit

3 files changed, 223 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/hashchangeevent/index.html b/files/zh-cn/web/api/hashchangeevent/index.html
new file mode 100644
index 0000000000..bb45095bac
--- /dev/null
+++ b/files/zh-cn/web/api/hashchangeevent/index.html
@@ -0,0 +1,135 @@
+---
+title: HashChangeEvent
+slug: Web/API/HashChangeEvent
+tags:
+  - API
+  - Event
+  - HTML5
+  - HashChange
+  - 事件
+  - 参考
+  - 接口
+translation_of: Web/API/HashChangeEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>HashChangeEvent</strong></code> 接口表示一个变化事件，当 URL 中的片段标识符发生改变时，会触发此事件。</p>
+
+<p>片段标识符指 URL 中 <code>#</code> 号和它以后的部分。</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="属性">属性</h2>
+
+<p><em> 这个接口也从 {{domxref("Event")}} 中继承属性。</em></p>
+
+<dl>
+ <dt>{{domxref("HashChangeEvent.newURL")}} {{readonlyInline}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>window即将导航到达的新 URL。</dd>
+ <dt>{{domxref("HashChangeEvent.oldURL")}} {{readonlyInline}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>window此前导航到达过的URL。</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<p><em>这个接口没有自己的方法，但从 {{domxref("Event")}} 中继承方法</em></p>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="井号内容变化的语法选择">井号内容变化的语法选择</h3>
+
+<p>你可以选择使用下述的任一方法监听 {{event("hashchange")}} 事件。</p>
+
+<pre class="brush: js">window.onhashchange = funcRef;
+</pre>
+
+<p><strong>或</strong></p>
+
+<pre class="brush: html">&lt;body onhashchange="funcRef();"&gt;
+</pre>
+
+<p><strong>或</strong></p>
+
+<pre class="brush: js">window.addEventListener("hashchange", funcRef, false);
+</pre>
+
+<h3 id="基本示例">基本示例</h3>
+
+<pre class="brush:js">function locationHashChanged() {
+  if (location.hash === '#somecoolfeature') {
+    somecoolfeature();
+  }
+}
+
+window.addEventListener('hashchange', locationHashChanged);
+</pre>
+
+<dl>
+</dl>
+
+<h2 id="回落方法（Polyfill）">回落方法（Polyfill）</h2>
+
+<p>在 <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills">Modernizr GitHub page</a> 中列出了几种回落（fallback）脚本。基本上，这些脚本每隔一段时间检查以此 {{domxref("HTMLHyperlinkElementUtils.hash", "location.hash")}}。这里是其中一个版本，其仅允许一个处理程序（handler）绑定在 {{domxref("WindowEventHandlers.onhashchange", "onhashchange")}} 属性上：</p>
+
+<pre class="brush:js;">(function(window) {
+
+  // 如果浏览器已经实现了此事件，则退出函数
+  if ( "onhashchange" in window.document.body ) return;
+
+  var location = window.location,
+      oldURL  = location.href,
+      oldHash = location.hash;
+
+  // 每隔 100 毫秒，检查一次片段标识符
+  setInterval(function() {
+    var newURL  = location.href,
+        newHash = location.hash;
+
+    // 如果片段标识符有变化，且处理程序存在
+    if ( newHash != oldHash &amp;&amp; typeof window.onhashchange === "function" ) {
+      // 执行处理程序
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("HTML WHATWG", "#hashchangeevent", "HashChangeEvent")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.HashChangeEvent")}}</p>
+
+<h2 id="相关事件">相关事件</h2>
+
+<ul>
+ <li>{{event("hashchange")}}</li>
+ <li>{{event("popstate")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/hashchangeevent/newurl/index.html b/files/zh-cn/web/api/hashchangeevent/newurl/index.html
new file mode 100644
index 0000000000..104fa38bfa
--- /dev/null
+++ b/files/zh-cn/web/api/hashchangeevent/newurl/index.html
@@ -0,0 +1,47 @@
+---
+title: HashChangeEvent.newURL
+slug: Web/API/HashChangeEvent/newURL
+tags:
+  - API
+  - HashChangeEvent
+  - Property
+  - Reference
+  - Web API
+translation_of: Web/API/HashChangeEvent/newURL
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div></div>
+
+<p><code><strong>newURL</strong></code> 为 {{domxref("HashChangeEvent")}} 接口的只读属性，其值为窗口导航改变后的 URL。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">let <em>newEventUrl</em> = <em>event</em>.newURL;</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{domxref("DOMString")}}.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('hashchange', function(event) {
+  console.log('Hash changed to ' + event.newURL);
+});</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hashchangeevent-newurl', 'HashChangeEvent: newURL')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
diff --git a/files/zh-cn/web/api/hashchangeevent/oldurl/index.html b/files/zh-cn/web/api/hashchangeevent/oldurl/index.html
new file mode 100644
index 0000000000..f93dd11624
--- /dev/null
+++ b/files/zh-cn/web/api/hashchangeevent/oldurl/index.html
@@ -0,0 +1,41 @@
+---
+title: HashChangeEvent.oldURL
+slug: Web/API/HashChangeEvent/oldURL
+translation_of: Web/API/HashChangeEvent/oldURL
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div></div>
+
+<p><code><strong>oldURL</strong></code> 为 {{domxref("HashChangeEvent")}} 接口的只读属性，其值为窗口导航改变前的 URL。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox notranslate">let <em>oldEventUrl</em> = <em>event</em>.oldURL;</pre>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{domxref("DOMString")}}.</p>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js notranslate">window.addEventListener('hashchange', function(event) {
+  console.log('Hash changed from ' + event.oldURL);
+});</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-hashchangeevent-oldurl', 'HashChangeEvent: oldURL')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>