diff options
Diffstat (limited to 'files/ru/orphaned/web/guide/events/event_handlers/index.html')
| -rw-r--r-- | files/ru/orphaned/web/guide/events/event_handlers/index.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/files/ru/orphaned/web/guide/events/event_handlers/index.html b/files/ru/orphaned/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..c30df7b474 --- /dev/null +++ b/files/ru/orphaned/web/guide/events/event_handlers/index.html @@ -0,0 +1,167 @@ +--- +title: DOM onevent handlers +slug: orphaned/Web/Guide/Events/Event_handlers +translation_of: Web/Guide/Events/Event_handlers +original_slug: Web/Guide/Events/Event_handlers +--- +<p>Веб-платформа предоставляет несколько способов получения уведомлений о событиях DOM. Два общих подхода - это {{domxref ("EventTarget.addEventListener", " addEventListener ()")}} и конкретные обработчики <span class="seoSummary"><code>on<em>event</em></code> </span> . Эта страница посвящена тому, как работают последние.</p> + +<h2 id="Регистрация_обработчиков_onevent">Регистрация обработчиков onevent</h2> + +<p>Обработчики <strong><code>on<em>event</em></code></strong> - это свойства определённых элементов DOM, позволяющие управлять тем, как этот элемент реагирует на события. Элементы могут быть интерактивными (ссылки, кнопки, изображения, формы и т. д.) или неинтерактивными (например, элемент base <body>). События - это такие действия, как:</p> + +<ul> + <li>Клик мышкой</li> + <li>Нажатие клавиш</li> + <li>Получение фокуса</li> +</ul> + +<p>Обработчик on-event обычно называется с именем события, на которое он реагирует, например <code>on<em>click</em></code> , <code>on<em>keypress</em></code> , <code>on<em>focus</em></code> и т. д.</p> + +<p>Вы можете указать обработчик событий on<...> для конкретного события (например, {{event("click")}}) для данного объекта различными способами:</p> + +<ul> + <li>Добавление HTML элемента {{Glossary("attribute")}} с событием <code>on<em><eventtype></em></code>:<br> + <code><button <strong>onclick="handleClick()"</strong>></code>,</li> + <li>Или установив соответствующий параметр {{Glossary("property/JavaScript", "property")}} из JavaScript:<br> + <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li> +</ul> + +<p>Свойство обработчика событий <code>on<em>event</em></code> служит своего рода заполнителем, которому может быть назначен один обработчик событий. Чтобы разрешить установку нескольких обработчиков для одного и того же события на данном объекте, вы можете вызвать метод {{domxref("EventTarget.addEventListener", " addEventListener ()")}} , который управляет списком обработчиков для данного события на объекте. Затем обработчик можно удалить из объекта, вызвав его функцию {{domxref ("EventTarget.removeEventListener", "removeEventListener()")}} .</p> + +<p>Когда происходит событие, которое применяется к элементу, каждый из его обработчиков событий вызывается, чтобы позволить им обрабатывать это событие один за другим. Вам не нужно вызывать их самостоятельно, хотя вы можете сделать это во многих случаях, чтобы легко имитировать происходящее событие. Например, учитывая объект кнопки <code>myButton</code> , вы можете сделать <code>myButton.onclick(myEventObject)</code> для прямого вызова обработчика событий. Если обработчик событий не имеет доступа к каким-либо данным из объекта event, вы можете пропустить это событие при вызове функции <code>onclick()</code> .</p> + +<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p> + +<p>Это продолжается до тех пор, пока не будет вызван каждый обработчик, если только один из обработчиков событий явно не остановит обработку события, вызвав {{domxref("Event.stopPropagation", " stopPropagation ()")}} на самом объекте события.</p> + +<h3 id="Non-element_objects">Non-element objects</h3> + +<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p> + +<pre class="brush: js">const xhr = new XMLHttpRequest(); +xhr.onprogress = function() { … };</pre> + +<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2> + +<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p> + +<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p> + +<h3 id="HTML">HTML</h3> + +<p>Given this HTML document:</p> + +<pre class="brush: html"><p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on + <a onclick="log('Click!')">these three words</a>. +</p> + +<div></div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p> + +<pre class="brush: js">let logElement = document.querySelector('div'); +let el = document.querySelector("a"); + +function log(msg) { logElement.innerHTML += `${msg}<br>` }; +function anchorOnClick(event) { log("Changed onclick handler") }; + +// Original Handler +log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`); + +//Changing handler using .onclick +log('<br>Changing onclick handler using <strong> onclick property </strong> '); + +el.onclick = anchorOnClick; + +log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); +log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`); + +//Changing handler using .setAttribute +log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> '); +el.setAttribute("onclick", 'anchorOnClick(event)'); + +log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); +log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p> + +<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p> + +<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> + +<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> + +<ul> + <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> + <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li> +</ul> + +<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p> + +<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> + +<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> + +<div class="blockIndicator note"> +<p>TBD (non-capturing listener)</p> +</div> + +<h3 id="Terminology">Terminology</h3> + +<p>The term <strong>event handler</strong> may refer to:</p> + +<ul> + <li>Any function or object that is registered to be notified of events</li> + <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { … }</code>.</li> +</ul> + +<p>When discussing the various methods of listening to events:</p> + +<ul> + <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li> + <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li> +</ul> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> + +<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> + +<pre class="brush: js">if ("onsomenewfeature" in window) { + /* do something amazing */ +} +</pre> + +<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> + +<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> |