files/zh-tw/web/api/globaleventhandlers/onclick/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

---
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>

{{Compat("api.GlobalEventHandlers.onclick")}}