files/ru/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
93
94
95
96
97
98
99
100
101
102
103

---
title: GlobalEventHandlers.onclick
slug: Web/API/GlobalEventHandlers/onclick
translation_of: Web/API/GlobalEventHandlers/onclick
---
<div>
<div>{{ ApiRef("HTML DOM") }}</div>
</div>

<div></div>

<p>Свойство <strong>onclick</strong> возвращает обработчик события <code>click</code> на текущем элементе.</p>

<div class="note"><strong>Note:</strong> При использовании обработчика события <code>click</code> для вызова любого действия, убедитесь, что событие <code>keydown</code> имеет такое же действие. Это нужно для того, чтобы пользователи, которые не используют мышь или тачскрин могли использовать то же действие.</div>

<h2 id="Syntax">Синтаксис</h2>

<pre class="syntaxbox"><var>element</var>.onclick = <var>functionRef</var>;
</pre>

<p>где <em>functionRef</em> это функция - зачастую это имя функции, которая объявлена где-то в другом месте или же <em>функциональное выражение</em>. См. "<a href="/en-US/docs/JavaScript/Guide/Functions">JavaScript Guide:Functions</a>".</p>

<p>Единственный аргумент, переданный в определённую функцию обработчик события это {{domxref("MouseEvent")}} объект. <code>this</code> внутри обработчика будет указывать на элемент, на котором было вызвано событие.</p>

<h2 id="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(); или showAlert(param); так НЕ сработает.
        // Нужно использовать ссылку на функцию, но не вызов функции.
        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">Примечания</h2>

<p>Событие <code>click</code> возникает, когда пользователь кликает на элемент. Событие <code>click</code> возникнет после событий <code>mousedown</code> и <code>mouseup</code>.</p>

<p>С данным свойством только один обработчик события <code>click</code> может быть назначен объекту. Возможно, вместо данного метода, вам стоит обратить внимание на метод {{domxref("EventTarget.addEventListener()")}}, т.к. он более гибкий и является частью спецификации DOM Events.</p>

<h2 id="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>{{Compat("api.GlobalEventHandlers.onclick")}}</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<div>
<ul>
 <li>
  <p id="event(click)_event">{{event("click")}} event</p>
 </li>
 <li>Related event handlers
  <ul>
   <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li>
   <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li>
  </ul>
 </li>
</ul>
</div>