initial commit

1 files changed, 144 insertions, 0 deletions

diff --git a/files/zh-tw/web/api/globaleventhandlers/onclick/index.html b/files/zh-tw/web/api/globaleventhandlers/onclick/index.html
new file mode 100644
index 0000000000..d5a1ac1845
--- /dev/null
+++ b/files/zh-tw/web/api/globaleventhandlers/onclick/index.html
@@ -0,0 +1,144 @@
+---
+title: GlobalEventHandlers.onclick
+slug: Web/API/GlobalEventHandlers/onclick
+tags:
+  - API
+  - HTML DOM
+  - Property
+  - Reference
+translation_of: Web/API/GlobalEventHandlers/onclick
+---
+<div>
+<div>{{ ApiRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p><strong>onclick</strong> 屬性回傳當前元件 <code>click</code> 事件處理器的程式碼（event handler code）。</p>
+
+<div class="note"><strong>注意:</strong> 當使用 <code>click</code> 事件觸發動作時，同時考慮將此動作加到 <code>keydown</code> 事件中，讓沒使用滑鼠或使用觸控螢幕的使用者也可以進行此動作。</div>
+
+<h2 id="Syntax" name="Syntax">語法</h2>
+
+<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
+</pre>
+
+<p>此處的 <em>functionRef</em> 為一個函式－通常是函式的名字或是<em>函式表示式</em>（function expression）<em>。</em> 見 "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>" 來了解更多。</p>
+
+<p>傳入事件處理函式（event handler function）的唯一引數為 {{domxref("MouseEvent")}} 物件。在這函式中，<code>this</code> 為觸發此事件的元件。</p>
+
+<h2 id="Example" name="Example">範例</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8" /&gt;
+    &lt;title&gt;onclick event example&lt;/title&gt;
+    &lt;script&gt;
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); or showAlert(param); will NOT work here.
+        // Must be a reference to a function name, not a function call.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    &lt;/script&gt;
+    &lt;style&gt;
+      #foo {
+        border: solid blue 2px;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body onload="initElement();"&gt;
+    &lt;span id="foo"&gt;My Event Element&lt;/span&gt;
+    &lt;p&gt;click on the above element.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>你也可以使用如下的匿名函式：</p>
+
+<pre class="brush:js">p.onclick = function(event) { alert("moot!"); };
+</pre>
+
+<h2 id="Notes" name="Notes">備註</h2>
+
+<p>使用者點擊元件時會觸發 <code>click</code> 事件。<code>click</code> 事件發生在 <code>mousedown</code> 及 <code>mouseup</code> 事件之後。</p>
+
+<p>這個屬性同一時間中只能指定一個 <code>click</code> 處理器（handler）。你也許會比較想使用 {{domxref("EventTarget.addEventListener()")}}，因為它有更多的彈性而且是 DOM 事件規範的一部份。</p>
+
+<h2 id="Specification" name="Specification">規範</h2>
+
+<table class="spectable standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">規範</th>
+   <th scope="col">狀態</th>
+   <th scope="col">備註</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<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>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>