diff options
Diffstat (limited to 'files/ru/web/api/globaleventhandlers/onclick/index.html')
| -rw-r--r-- | files/ru/web/api/globaleventhandlers/onclick/index.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/files/ru/web/api/globaleventhandlers/onclick/index.html b/files/ru/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..17657d6383 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,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" name="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" name="Example">Пример</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <title>onclick event example</title> + <script> + function initElement() { + var p = document.getElementById("foo"); + // NOTE: showAlert(); или showAlert(param); так НЕ сработает. + // Нужно использовать ссылку на функцию, но не вызов функции. + p.onclick = showAlert; + }; + + function showAlert(event) { + alert("onclick Event detected!"); + } + </script> + <style> + #foo { + border: solid blue 2px; + } + </style> + </head> + <body onload="initElement();"> + <span id="foo">My Event Element</span> + <p>click on the above element.</p> + </body> +</html> +</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> может быть назначен объекту. Возможно, вместо данного метода, Вам стоит обратить внимание на метод {{domxref("EventTarget.addEventListener()")}}, т.к. он более гибкий и является частью спецификации DOM Events.</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>{{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> |