diff options
Diffstat (limited to 'files/ru/web/api/globaleventhandlers')
22 files changed, 2169 insertions, 0 deletions
diff --git a/files/ru/web/api/globaleventhandlers/index.html b/files/ru/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..33ecd33dcf --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/index.html @@ -0,0 +1,213 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - HTML DOM +translation_of: Web/API/GlobalEventHandlers +--- +<div> +<div>{{ ApiRef("HTML DOM") }}</div> +</div> + +<p>The <strong><code>GlobalEventHandlers</code></strong> interface describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, or {{domxref("WorkerGlobalScope")}} for Web Workers. Each of these interfaces can implement more event handlers.</p> + +<p><code>GlobalEventHandlers</code> is a raw interface and no object of this type can be created.</p> + +<h2 id="Properties">Properties</h2> + +<p>The events properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}}, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.</p> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("abort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("blur")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>Is an {{domxref("OnErrorEventHandler")}} representing the code to be called when the {{event("error")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no method.</em></p> + +<h2 id="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('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML 5")}} snapshot.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("api.GlobalEventHandlers")}}</p> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> diff --git a/files/ru/web/api/globaleventhandlers/onabort/index.html b/files/ru/web/api/globaleventhandlers/onabort/index.html new file mode 100644 index 0000000000..dbe49a0079 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onabort/index.html @@ -0,0 +1,100 @@ +--- +title: GlobalEventHandlers.onabort +slug: Web/API/GlobalEventHandlers/onabort +translation_of: Web/API/GlobalEventHandlers/onabort +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>Обработчик событий, позволяющий прерывать события объекта <strong>window</strong>. (Недоступен для<strong> Firefox 2</strong> и <strong>Safari</strong>).</p> + +<p>TODO define what "abort" is. Closing the window via window manager? Stopping the load of the page? By which means and reasons (user, network/server)? At which stages would it fire / be catched? Для IE, событие <strong>onabort</strong> доступно только для тега <code>img</code>.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox">window.onabort = <em>funcRef</em> +</pre> + +<ul> + <li><code>funcRef</code>: Reference to a function</li> +</ul> + +<h2 id="Example" name="Example">Example</h2> + +<pre class="brush:js">window.onabort = function() { + alert("Load aborted."); +}</pre> + +<h2 id="Specification" name="Specification">Specification</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html new file mode 100644 index 0000000000..c1b865945d --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onanimationcancel/index.html @@ -0,0 +1,247 @@ +--- +title: GlobalEventHandlers.onanimationcancel +slug: Web/API/GlobalEventHandlers/onanimationcancel +translation_of: Web/API/GlobalEventHandlers/onanimationcancel +--- +<div>{{APIRef("CSS3 Animations")}}</div> + +<p>Обработчик события {{event("animationcancel")}} . Это событие вызывается когда CSS Анимация (<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a>) неожиданно прерывается (иными словами, в любой момент, когда анимация прекращает воспроизведение, не отправляя событие завершения {{event("animationend")}} ), например, когда изменяется {{cssxref("animation-name")}}, анимация удаляется или когда элемент с анимацией оказывается скрыт (непосредственно сам элемент, или другой элемент, содержащий его) средствами CSS. </p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">var <em>animCancelHandler</em> = <em>target</em>.onanimationcancel; + +<em>target</em>.onanimationcancel = <em>{{jsxref("Function")}}</em> +</pre> + +<h3 id="Значения">Значения</h3> + +<p>Функция {{jsxref("Function")}} вызывается когда {{event("animationcancel")}} происходит событие, указывающее, что CSS анимация запустилась на объекте <em>target</em>, где объект <em>target</em> object это HTML элемент ({{domxref("HTMLElement")}}), документ ({{domxref("Document")}}), или окно ({{domxref("Window")}}). Эта функция принимает один параметр {{domxref("AnimationEvent")}} - объект, описывающий событие, которое произошло.</p> + +<h2 id="Example" name="Example">Пример</h2> + +<h3 id="HTML_content">HTML content</h3> + +<pre class="brush: html"><div class="main"> + <div id="box" onanimationcancel="handleCancelEvent(event);"> + <div id="text">Box</div> + </div> +</div> + +<div class="button" id="toggleBox"> + Hide the Box +</div> + +<pre id="log"></pre></pre> + +<h3 id="CSS_content">CSS content</h3> + +<div class="hidden"> +<pre class="brush: css">:root { + --boxwidth:50px; +} + +.main { + width: 300px; + height:300px; + border: 1px solid black; +} + +.button { + cursor: pointer; + width: 300px; + border: 1px solid black; + font-size: 16px; + text-align: center; + margin-top: 0; + padding-top: 2px; + padding-bottom: 4px; + color: white; + background-color: darkgreen; + font: 14px "Open Sans", "Arial", sans-serif; +} + +#text { + width: 46px; + padding: 10px; + position: relative; + text-align: center; + align-self: center; + color: white; + font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif; +} + + </pre> +</div> + +<p>Опустим некоторые фрагмнты CSS, не имеющие значение для нас, и рассмотрим стили для элемента, который мы анимируем. Это блок box со всеми своими свойствами, включая определенную анимацию {{cssxref("animation")}}. Мы продолжим и опишем анимацию прямо здесь, поскольку обычно она должна запускаться непосредственно при загрузке страницы, не зависимо от какого-либо другого события. </p> + +<pre class="brush: css">#box { + width: var(--boxwidth); + height: var(--boxwidth); + left: 0; + top: 0; + border: 1px solid #7788FF; + margin: 0; + position: relative; + background-color: #2233FF; + display: flex; + justify-content: center; + animation: 5s ease-in-out 0s infinite alternate both slideBox; +} + +</pre> + +<p>Далее описываются ключевые кадры анимации, которые выводят содержимое из верхнего левого угла окна в нижний правый угол.</p> + +<pre class="brush: css">@keyframes slideBox { + from { + left:0; + top:0; + } + to { + left:calc(100% - var(--boxwidth)); + top:calc(100% - var(--boxwidth)) + } +} +</pre> + +<p>Поскольку анимация описывается как бесконечное число раз, поочередное попеременное направление, поле будет скользить назад и вперед между двумя углами до тех пор, пока не остановится или страница не будет закрыта.</p> + +<h3 id="JavaScript_content">JavaScript content</h3> + +<p>Прежде чем перейти к коду анимации, мы определяем функцию, которая регистрирует информацию в поле на экране пользователя. Мы будем использовать это, чтобы показать информацию о полученных событиях. Обратите внимание на использование {{domxref ("AnimationEvent.animationName")}} и {{domxref ("AnimationEvent.elapsedTime")}}, чтобы получить информацию о произошедшем событии.</p> + +<pre class="brush: js">function log(msg, event) { + let logBox = document.getElementById("log"); + + logBox.innerHTML += msg; + + if (event) { + logBox.innerHTML += " <code>"+ event.animationName + + "</code> at time " + event.elapsedTime.toFixed(2) + + " seconds."; + } + + logBox.innerHTML += "\n"; +}; + + +</pre> + +<p>Затем мы устанавливаем обработчик событий <code>handleCancelEvent() - функцию</code>, которая вызывается в ответ на событие {{event("animationcancel")}}. Все, что мы делаем здесь - это выводим информацию в консоль, но вы можете использовать это для запуска новой анимацию или других эффектов, связанных с окончанием некоторой операции.</p> + +<pre class="brush: js">function handleCancelEvent(event) { + log("Animation canceled", event); +}; + +</pre> + +<p>Теперь добавим переключение {{cssxref("display")}} между <code>"</code><code>flex"</code> и <code>"</code><code>none"</code> и установим обрабочик события щелчка {{event("click")}} на кнопке "Hide/Show":</p> + +<pre class="brush: js">document.getElementById('toggleBox').addEventListener('click', function() { + if (box.style.display == "none") { + box.style.display = "flex"; + document.getElementById("toggleBox").innerHTML = "Hide the box"; + } else { + box.style.display = "none"; + document.getElementById("toggleBox").innerHTML = "Show the box"; + } +}); +</pre> + +<p>Таким образом переключение стилей элемента <code>display: none</code> приводит к прерыванию анимации. In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.</p> + +<div class="note"> +<p>At this time, no major browser supports <code>animationcancel</code>.</p> +</div> + +<h3 id="Result">Result</h3> + +<p>Assembled together, you get this:</p> + +<p>{{ EmbedLiveSample('Example', 500, 400) }}</p> + +<p>If your browser supports <code>animationcancel</code>, hiding the box using the button will cause a message to be displayed about the event.</p> + +<h2 id="Specification">Specification</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(54)}}</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>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(54)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{event("animationcancel")}} event this event handler is triggered by.</li> + <li>{{domxref("AnimationEvent")}}</li> +</ul> diff --git a/files/ru/web/api/globaleventhandlers/onanimationend/index.html b/files/ru/web/api/globaleventhandlers/onanimationend/index.html new file mode 100644 index 0000000000..babeb4f738 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onanimationend/index.html @@ -0,0 +1,109 @@ +--- +title: GlobalEventHandler.onanimationend +slug: Web/API/GlobalEventHandlers/onanimationend +translation_of: Web/API/GlobalEventHandlers/onanimationend +--- +<div>{{APIRef("CSS3 Animations")}}</div> + +<p>Обработчик события {{event("animationend")}}. Это событие вывзывается когда <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS анимация</a> достигает конца своего активного периода, который вычисляется как ({{cssxref("animation-duration")}} * {{cssxref("animation-iteration-count")}}) + {{cssxref("animation-delay")}}.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">var <em>animEndHandler</em> = <em>target</em>.onanimationend; + +<em>target</em>.onanimationend = <em>{{jsxref("Function")}}</em> +</pre> + +<h3 id="Значение">Значение</h3> + +<p>A {{jsxref ("Function")}} вызывается, когда происходит событие {{event ("animationend")}}, указывающее, что анимация CSS начинается с цели, где целевой объект является HTML-элементом ({{ Domxref ("HTMLElement")}}), документ ({{domxref ("Document")}}) или окно ({{domxref ("Window")}}). Функция получает в качестве входного параметра один параметр: {{domxref ("AnimationEvent")}} объект, описывающий событие, которое произошло.</p> + +<h2 id="Example">Example</h2> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart", "Example")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationend','onanimationend')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Microsoft Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatGeckoDesktop(51)}}</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>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="См_также">См также</h2> + +<ul> + <li>The {{event("animationend")}} event this event handler is triggered by</li> + <li>{{domxref("AnimationEvent")}}</li> + <li>The {{event("animationstart")}} event</li> +</ul> diff --git a/files/ru/web/api/globaleventhandlers/onblur/index.html b/files/ru/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..435313c2d8 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Свойство <code><strong>onblur</strong></code> из {{domxref("GlobalEventHandlers")}} событий {{domxref("EventHandler")}} для {{event("blur")}} события. Оно доступно для{{domxref("Element")}}, {{domxref("Document")}} и {{domxref("Window")}}.</p> + +<p>Событие <code>blur</code> возникает когда элемент теряет фокус.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Обратным <code>onblur</code> является {{domxref("GlobalEventHandlers.onfocus", "onfocus")}}.</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>target</em>.onblur = <em>functionRef</em>; +</pre> + +<h3 id="Value">Value</h3> + +<p><code>functionRef</code> - это имя функции или <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. Функция получает объект {{domxref("FocusEvent")}} в качестве единственного аргумента.</p> + +<h2 id="Example">Example</h2> + +<p>В этом примере <code>onblur</code> и {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} используются для изменения текста в элементе {{HtmlElement("input")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="CLICK HERE"> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let input = document.querySelector('input'); + +input.onblur = inputBlur; +input.onfocus = inputFocus; + +function inputBlur() { + input.value = 'Focus has been lost'; +} + +function inputFocus() { + input.value = 'Focus is here'; +}</pre> + +<h3 id="Result_2">Result</h3> + +<p>Нажимайте внутри и вне поля формы. Содержимое будет изменятся.</p> + +<p id="Result">{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onblur")}}</p> + +<p>In contrast to IE, in which almost all kinds of elements receive the <code>blur</code> event, only a few kinds of elements on Gecko browsers work with this event.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("blur")}} event</li> + <li>Related event handler: {{domxref("GlobalEventHandlers.onfocus")}}</li> +</ul> diff --git a/files/ru/web/api/globaleventhandlers/onchange/index.html b/files/ru/web/api/globaleventhandlers/onchange/index.html new file mode 100644 index 0000000000..727828bc5b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onchange/index.html @@ -0,0 +1,57 @@ +--- +title: GlobalEventHandlers.onchange +slug: Web/API/GlobalEventHandlers/onchange +tags: + - API + - HTML DOM + - Property + - Reference + - onchange +translation_of: Web/API/GlobalEventHandlers/onchange +--- +<div> +<div>{{ ApiRef("HTML DOM") }}</div> + +<div> </div> +</div> + +<p>Свойство <code>onchange</code> (Дословно "На изменение") устанавливает и возвращает <a href="/docs/Web/Guide/Events/Event_handlers">обработчик события</a>, для события {{event("change")}} (Изменение чего-либо).</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onchange = <em>handlerFunction</em>; // handlerFunction - ссылка на функцию обработчик, установленная как свойство <code>onchange, для элемента element</code> +var <em>handlerFunction</em> = <em><var>element</var></em>.onchange; +</pre> + +<p><code><em>handlerFunction</em></code> должна быть либо <a href="/en-US/docs/Web/JavaScript/Reference/Functions">функцией</a> определяющей обработчик события, либо <code>null</code> .</p> + +<h2 id="Notes" name="Notes">Заметки</h2> + +<p>Почитайте страницу <a href="/en-US/docs/Web/Guide/Events/Event_handlers">DOM обработчики события</a> , там содержится вся информация о работе с <code>on...</code> обработчиками.</p> + +<p>Документация по событию {{event("change")}}.</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-onchange','onchange')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div> +<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести правки в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и Отправьте нам pull-request.</div> + +<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p> +</div> 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> diff --git a/files/ru/web/api/globaleventhandlers/onclose/index.html b/files/ru/web/api/globaleventhandlers/onclose/index.html new file mode 100644 index 0000000000..6a36f95dce --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onclose/index.html @@ -0,0 +1,97 @@ +--- +title: GlobalEventHandlers.onclose +slug: Web/API/GlobalEventHandlers/onclose +translation_of: Web/API/GlobalEventHandlers/onclose +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Обработчик события для событий закрытия, отправляется в окно. (Не доступен в Firefox 2 или Safari)</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">window.onclose = funcRef; +</pre> + +<h3 id="Параметры">Параметры</h3> + +<ul> + <li><code>funcRef</code> является ссылкой на функцию.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: js">window.onclose = resetThatServerThing; +</pre> + +<h2 id="Спецификация">Спецификация</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-onclose','onclose')}}</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>свойство</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>базоввая поддержка</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</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>базоввая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html new file mode 100644 index 0000000000..cc206b1a8c --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/oncontextmenu/index.html @@ -0,0 +1,63 @@ +--- +title: GlobalEventHandlers.oncontextmenu +slug: Web/API/GlobalEventHandlers/oncontextmenu +tags: + - API + - HTML DOM + - Property + - Reference + - oncontextmenu +translation_of: Web/API/GlobalEventHandlers/oncontextmenu +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<div> </div> + +<p><span class="seoSummary">Свойство обработчика событий для события клика правой кнопкой мыши внутри элемента window. </span></p> + +<p><span class="seoSummary">Если стандартное поведение не будет предотвращено, то активируется контекстное меню браузера (В IE8 есть ошибка, связанная с тем что контекстное меню не будет активировано если определён обработчик события contextmenu). </span></p> + +<p><span class="seoSummary">Обратите внимание что это событие будет происходить вместе с другими событиями right-click и не зависит от <a href="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">"contextmenu" атрибута</a> элемента.</span></p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">window.oncontextmenu = funcRef; +//funcRef - ссылка на функцию, которая будет вызвана в ответ на событие "oncontextmenu", происходящее при клике правой кнопкой мыши внутри объекта window.</pre> + +<h2 id="Example" name="Example">Пример</h2> + +<p>Код в этом примере меняет стандартное поведение браузера, отключая клик правой кнопкой мыши.</p> + +<pre class="brush:js;">document.oncontextmenu = function () { // Используйте объект "document" вместо "window" для совместимости с IE8. + return false; +}; + +window.addEventListener('contextmenu', function (e) { // Не совместимо с IE младше 9 версии + e.preventDefault(); +}, false); +</pre> + +<h2 id="Specifications" name="Specifications">Специфкация</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-oncontextmenu','oncontextmenu')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div> +<div class="hidden">Таблица совместимости на этой странице сгенерирована из структурированных данных. Если вы хотите внести правки в эти данные, пожалуйста ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и Отправьте нам pull-request.</div> + +<p>{{Compat("api.GlobalEventHandlers.oncontextmenu")}}</p> +</div> diff --git a/files/ru/web/api/globaleventhandlers/ondragstart/index.html b/files/ru/web/api/globaleventhandlers/ondragstart/index.html new file mode 100644 index 0000000000..3ead749a9b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/ondragstart/index.html @@ -0,0 +1,111 @@ +--- +title: GlobalEventHandlers.ondragstart +slug: Web/API/GlobalEventHandlers/ondragstart +translation_of: Web/API/GlobalEventHandlers/ondragstart +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers","global event handler")}} для события {{event("dragstart")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">var <var>dragstartHandler</var> = <var>targetElement</var>.ondragstart; +</pre> + +<h3 id="Возвращаемое_значение">Возвращаемое значение</h3> + +<dl> + <dt><code>dragstartHandler</code></dt> + <dd>Обработчик событий <em>dragstart</em> для элемента <code>targetElement</code>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>Этот пример демонстрирует использование {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} атрибута обработчика для установки обработчика событий элемента {{event("dragstart")}}.</p> + +<pre class="brush: js"><!DOCTYPE html> +<html lang=en> +<title>Examples of using the ondrag Global Event Attribute</title> +<meta content="width=device-width"> +<style> + div { + margin: 0em; + padding: 2em; + } + #source { + color: blue; + border: 1px solid black; + } + #target { + border: 1px solid black; + } +</style> +</head> +<script> +function drag_handler(ev) { + console.log("Drag"); +} + +function dragstart_handler(ev) { + console.log("dragStart"); + ev.dataTransfer.setData("text", ev.target.id); +} + +function drop_handler(ev) { + console.log("Drop"); + ev.currentTarget.style.background = "lightyellow"; + + ev.preventDefault(); + var data = ev.dataTransfer.getData("text"); + ev.target.appendChild(document.getElementById(data)); +} + +function dragover_handler(ev) { + console.log("dragOver"); + ev.preventDefault(); +} +</script> +<body> +<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1> + <div> + <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> + Select this element, drag it to the Drop Zone and then release the selection to move the element.</p> + </div> + <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div> +</body> +</html> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.ondragstart")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{event("dragstart")}}</li> +</ul> diff --git a/files/ru/web/api/globaleventhandlers/onerror/index.html b/files/ru/web/api/globaleventhandlers/onerror/index.html new file mode 100644 index 0000000000..29555d6c44 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onerror/index.html @@ -0,0 +1,70 @@ +--- +title: GlobalEventHandlers.onerror +slug: Web/API/GlobalEventHandlers/onerror +tags: + - API + - HTML DOM + - Свойство + - Ссылка +translation_of: Web/API/GlobalEventHandlers/onerror +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>Обработчик события для ошибок среды Javascript.</p> + +<p>Обратите внимание, что некоторые/многие <code>error</code> не вызывают <code>window.onerror</code>, вы должны слушать их специально.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre>window.onerror = funcRef; +</pre> + +<h3 id="Parameters" name="Parameters">Параметры</h3> + +<ul> + <li><code>funcRef</code> ссылка на функцию. Когда функция возвращает <code>true</code>, блокируется вызов обработчика события по умолчанию. Параметры функции: + + <ul> + <li>Сообщение ошибки (string)</li> + <li>Url, где произошла ошибка (string)</li> + <li>Номер строки, где прошизошла ошибка (number)</li> + <li>Номер столбца для строки, в которой произошла ошибка (number) {{gecko_minversion_inline("31.0")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error Object</a> (object) {{gecko_minversion_inline("31.0")}}</li> + </ul> + </li> +</ul> + +<h2 id="Example" name="Example">Примеры</h2> + +<pre class="brush: js">// Пример 1: + +// Предотвращает диалоги об ошибках, отображает какая это функция окна, это нормальное +// поведение - путем переопределения обработчика событий по умолчанию для событий об ошибках, которые +// переходят окну. +window.onerror = null; + +// Пример 2: + +var gOldOnError = window.onerror; +// Переопределить прошлый обработчик события. +window.onerror = function myErrorHandler(errorMsg, url, lineNumber) { + if (gOldOnError) + // Вызвать прошлый обработчик события. + return gOldOnError(errorMsg, url, lineNumber); + + // Просто запустить обработчик события по умолчанию. + return false; +} +</pre> + +<h2 id="Notes" name="Notes">Заметки</h2> + +<p>Событие возникает, когда происходит ошибка в скрипте.</p> + +<p>При использовании строчной HTML-разметки (<span class="nowiki"><body onerror="alert('an error occurred')>...</span>), аргументы не именуются. Они могут быть доступны через arguments от <code>{{ mediawiki.external(0) }}</code> до <code>{{ mediawiki.external(2) }}</code>.</p> + +<p>Здесь недоступен <code><a class="external" href="/en/Components.stack" title="https://developer.mozilla.org/En/Components.stack">Components.stack</a>.caller для использования</code>. (Смотрите <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=355430"><strong>bug 355430</strong></a>.)</p> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<p><a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097" title="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.3/reference/handlers.html#1120097">JavaScript 1.1</a></p> diff --git a/files/ru/web/api/globaleventhandlers/onfocus/index.html b/files/ru/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..ad7fce00bc --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Свойство <strong>onfocus</strong> устанавливает обработчик события onFocus на данный элемент.</p> + +<h2 id="Синтакс">Синтакс</h2> + +<pre class="syntaxbox">element.onfocus = выполняемый код при сработке события +</pre> + +<h2 id="Заметка">Заметка</h2> + +<p>Событие фокуса (focus) вызывается когда пользователь устанавливает фокус на данный элемент.</p> + +<p>Чтобы вызвать событие <strong><code>onfocus</code></strong> на элементах, отличных от полей ввода <strong>input, </strong>им необходимо предварительно добавить атрибут {{htmlattrxref("tabindex")}} (см. <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a> для подробностей).</p> + +<p>В отличие от браузеров IE, в которых практически на всех элементах можно вызвать событие фокуса, браузеры, написанные на движке <strong>Gecko (Mozilla Firefox), </strong>не поддерживают это событие<strong>.</strong></p> + +<h2 id="Спецификации">Спецификации</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-onfocus','onfocus')}}</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> diff --git a/files/ru/web/api/globaleventhandlers/oninput/index.html b/files/ru/web/api/globaleventhandlers/oninput/index.html new file mode 100644 index 0000000000..7da5c5e43b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/oninput/index.html @@ -0,0 +1,110 @@ +--- +title: GlobalEventHandlers.oninput +slug: Web/API/GlobalEventHandlers/oninput +translation_of: Web/API/GlobalEventHandlers/oninput +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><span id="result_box" lang="ru"><span>Обработчик события для </span></span><a href="/en-US/docs/Web/Events/input"><code>input</code> event</a><span lang="ru"><span> в окне.</span> <span>Событие ввода возникает при изменении значения элемента {{HTMLElement ("input")}}.</span><br> + <br> + <span>Это событие пузырится.</span> <span>Если он поддерживается в окне, он поддерживается и в {{HTMLElement ("input")}}.</span></span></p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><script> + +window.addEventListener('input', function (e) { + console.log("input event detected! coming from this element:", e.target); +}, false); + +</script> + +<input placeholder="type here and see console."> +</pre> + +<h2 id="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", "forms.html#event-input-input", "oninput")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>2</td> + <td>9</td> + <td>10</td> + <td>{{CompatVersionUnknown}}</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/">An HTML5 Browser maze, oninput support</a></li> + <li><a class="external" href="http://www.useragentman.com/blog/2011/05/12/fixing-oninput-in-ie9-using-html5widgets/">Fixing oninput in IE Using html5Widgets</a> includes polyfill for IE6-8</li> + <li>Mathias Bynens suggests <a class="external" href="http://mathiasbynens.be/notes/oninput">binding to both input and keydown</a></li> + <li><a class="external" href="http://help.dottoro.com/ljhxklln.php">oninput event | dottoro</a> has notes about bugginess in IE9</li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312094">Bug 312094 - Add support for <select oninput> </a></li> +</ul> diff --git a/files/ru/web/api/globaleventhandlers/onkeydown/index.html b/files/ru/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..48526391bb --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,84 @@ +--- +title: GlobalEventHandlers.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +tags: + - API + - HTML DOM + - Свойство +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Свойство <code><strong>onkeydown</strong></code> возвращает обработчик события {{event("keydown")}} на текущем элементе.</p> + +<p>Событие <code>keydown</code> вызывается, когда пользователь нажал клавишу на клавиатуре.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">element.onkeydown = <var>event handling code</var> +</pre> + +<h3 id="Значение">Значение</h3> + +<p>Имя функции <code>functionRef</code> или <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. Функция получает объект {{domxref("KeyboardEvent")}} в качестве единственного аргумента.</p> + +<h2 id="Пример">Пример</h2> + +<p>Этот пример показывает значение {{domxref("KeyboardEvent.code")}}, когда вы нажимаете клавишу внутри элемента {{HtmlElement("input")}}.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><input> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.onkeydown = logKey; + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Пример")}}</p> + +<h2 id="Спецификации">Спецификации</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-onkeydown','onkeydown')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div>{{Compat("api.GlobalEventHandlers.onkeydown")}}</div> + +<h2 id="Смотите_также">Смотите также</h2> + +<div> +<ul> + <li>Событие {{Event("keydown")}}</li> + <li>Похожие обработчики событий + <ul> + <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li> + <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li> + </ul> + </li> +</ul> +</div> + +<div id="compat-mobile"></div> diff --git a/files/ru/web/api/globaleventhandlers/onkeypress/index.html b/files/ru/web/api/globaleventhandlers/onkeypress/index.html new file mode 100644 index 0000000000..bb5a16e61b --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onkeypress/index.html @@ -0,0 +1,53 @@ +--- +title: GlobalEventHandlers.onkeypress +slug: Web/API/GlobalEventHandlers/onkeypress +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<h2 id="Описание">Описание</h2> + +<p>Свойство<strong> onkeypress</strong> задаёт и возвращает код обработчика событий onKeyPress для текущего элемента.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">element.onkeypress = <em>код обработчика событий</em> +</pre> + +<h2 id="Примечания">Примечания</h2> + +<p>Событие нажатия <strong>должно</strong> вызываться тогда, когда пользователь нажимает клавишу на клавиатуре. Тем не менее, не все браузеры отрабатывают это событие для некоторых (определённых) клавиш.</p> + +<h3 id="Несовместимость_в_браузерах">Несовместимость в браузерах</h3> + +<p>Браузеры на основе Webkit (к примеру, Google Chrome и Safari) не отрабатывают события нажатия клавиш-указателей ("стрелок").</p> + +<p>Firefox не отрабатывает события, в основе которых лежат клавиши управления (модификаторы) - такие, как, например, SHIFT.</p> + +<h2 id="Спецификация">Спецификация</h2> + +<p>Не является частью спецификации.</p> + +<h2 id="Пример">Пример</h2> + +<p>Следующий пример демонстрирует использование события <code>onkeypress</code> в процессе заполнения поля формы (только) цифрами:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<title>Пример</title> +<script> + function numbersOnly(oToCheckField, oKeyEvent) { + return oKeyEvent.char === 0 || /\d/.test(String.fromCharCode(oKeyEvent.char)); + } +</script> +</head> + +<body> +<form name="myForm"> +<p>Вводите только цифры: <input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /></p> +</form> +</body> +</html> +</pre> diff --git a/files/ru/web/api/globaleventhandlers/onload/index.html b/files/ru/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..7040dadfc4 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,58 @@ +--- +title: GlobalEventHandlers.onload +slug: Web/API/GlobalEventHandlers/onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>Обработчик для события загрузки объекта {{ domxref("window") }}.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="eval">window.onload = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> функция обработчик события будет вызвана, когда произойдёт событие загрузки окна.</li> +</ul> + +<h2 id="Example" name="Example">Примеры</h2> + +<pre class="brush: js">window.onload = function() { + init(); + doSomethingElse(); +}; +</pre> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>onload test</title> + <script> + function load() { + alert("Событие загрузки поймано!"); + } + window.onload = load; + </script> + </head> + <body> + <p>Событие загрузки произойдёт, когда документ будет загружен!</p> + </body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Заметки</h2> + +<p>Событие загрузки возникают в конце процесса загрузки документа. В этот момент все объекты документа находятся в DOM, и все картинки, скрипты, фреймы, ссылки загружены.</p> + +<p>Есть также <a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Gecko</a> события как <code>DOMContentLoaded</code> и <code>DOMFrameContentLoaded</code> (которые могут быть навешены с помощью {{ domxref("EventTarget.addEventListener()") }}) которые возникают после того как DOM для страницы будет собран, но не ждут, когда другие ресурсы будут загружены.</p> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<p>Этот обработчик события указан в стандарте <a class="external" href="http://www.whatwg.org/html/#handler-window-onload" title="http://www.whatwg.org/html/#handler-window-onload">HTML</a>.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><code>DOMContentLoaded</code> событие в <a href="/En/Listening_to_events#Simple_DOM.c2.a0events" title="En/Listening to events#Simple DOM.c2.a0events">Listening to events: Simple DOM events</a></li> +</ul> diff --git a/files/ru/web/api/globaleventhandlers/onloadend/index.html b/files/ru/web/api/globaleventhandlers/onloadend/index.html new file mode 100644 index 0000000000..1c5f270054 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onloadend/index.html @@ -0,0 +1,110 @@ +--- +title: GlobalEventHandlers.onloadend +slug: Web/API/GlobalEventHandlers/onloadend +translation_of: Web/API/GlobalEventHandlers/onloadend +--- +<div>{{ApiRef}}</div> + +<p><span id="result_box" lang="ru"><span>Свойство</span></span> <strong><code>onloadend</code></strong> <span id="result_box" lang="ru"><span>от </span></span>{{domxref("GlobalEventHandlers")}} примесь {{domxref("EventHandler")}} <span id="result_box" lang="ru"><span>передает код для вызова в момент возникновения события</span></span> {{event("loadend")}} (когда процесс загрузки ресурса окончился и остановился)</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><var>img</var>.onloadend = <var>funcRef</var>; +</pre> + +<p>При возникновении события <code>loadend</code> будет вызванна функция обработчик <code>funcRef</code>.</p> + +<h2 id="Example" name="Example">Примеры</h2> + +<pre class="brush: html"><img src="myImage.jpg"></pre> + +<pre class="brush: js">// 'loadstart' fires first, then 'load', then 'loadend' + +image.addEventListener('load', function(e) { + console.log('Image loaded'); +}); + +image.addEventListener('loadstart', function(e) { + console.log('Image load started'); +}); + +image.addEventListener('loadend', function(e) { + console.log('Image load finished'); +});</pre> + +<h2 id="Specification" name="Specification">Спецификации</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#handler-onloadend", "onloadend")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</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>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("52")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("52")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] As of Firefox 52, The <code>loadend</code> event is now fired on {{htmlelement("img")}} elements.</p> diff --git a/files/ru/web/api/globaleventhandlers/onmousedown/index.html b/files/ru/web/api/globaleventhandlers/onmousedown/index.html new file mode 100644 index 0000000000..39c6b2ee1c --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onmousedown/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onmousedown +slug: Web/API/GlobalEventHandlers/onmousedown +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +<div> +<div>{{ ApiRef("HTML DOM") }}</div> +</div> + +<p>Свойство <code>onmousedown</code> возвращает код обработчика события <code>onmousedown</code> на соответствующем элементе.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">element.onmousedown = <em>код обработчика этого события (функция)</em> +</pre> + +<h2 id="Примечания">Примечания</h2> + +<p>Событие <code>mousedown</code> обрабатывается когда пользователь нажимает кнопку мыши. </p> + +<h2 id="Спецификация">Спецификация</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-onmousedown','onmousedown')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Обычная соместимость</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Обычная совместимость</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/globaleventhandlers/onmouseup/index.html b/files/ru/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..9b802ee95e --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onmouseup +slug: Web/API/GlobalEventHandlers/onmouseup +translation_of: Web/API/GlobalEventHandlers/onmouseup +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><span id="result_box" lang="ru"><span>Свойство <strong>onmouseup</strong> возвращает код обработчика события onMouseUp текущего элемента.</span></span></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element.onmouseup = <span class="short_text" id="result_box" lang="ru"><span>код обработки событий</span></span> +</pre> + +<h2 id="Notes">Notes</h2> + +<p><span id="result_box" lang="ru"><span>Событие mouseup возникает, когда пользователь отпускает кнопку мыши.</span></span></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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>{{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>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/web/api/globaleventhandlers/onscroll/index.html b/files/ru/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..a62384b132 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,80 @@ +--- +title: GlobalEventHandlers.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Обработчик для события скролла.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">element.onscroll = <var>functionReference</var> +</pre> + +<h3 id="Parameters">Parameters</h3> + +<p><code>functionReference</code> is a reference to a function to be executed when <code>element</code> is scrolled.</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <style> + #container { + position: absolute; + height: auto; + top: 0; + bottom: 0; + width: auto; + left: 0; + right: 0; + overflow: auto; + } + + #foo { + height:1000px; + width:1000px; + background-color: #777; + display: block; + } + + </style> + </head> + <body> + <div id="container"> + <div id="foo"></div> + </div> + + <script type="text/javascript"> + document.getElementById('container').onscroll = function() { + console.log("scrolling"); + }; + </script> + </body> +</html></pre> + +<h2 id="Notes">Notes</h2> + +<p>The <code>scroll</code> event is raised when the user scrolls the contents of an element. <code>Element.onscroll</code> is equivalent to <code>element.addEventListener("scroll" ... )</code>.</p> + +<h2 id="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("DOM3 Events", "#event-type-scroll", "onscroll")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/api/globaleventhandlers/onselect/index.html b/files/ru/web/api/globaleventhandlers/onselect/index.html new file mode 100644 index 0000000000..0244069e4d --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onselect/index.html @@ -0,0 +1,72 @@ +--- +title: GlobalEventHandlers.onselect +slug: Web/API/GlobalEventHandlers/onselect +translation_of: Web/API/GlobalEventHandlers/onselect +--- +<div> +<div>{{ ApiRef("HTML DOM") }}</div> +</div> + +<p>Обработчик события select окна браузера.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox">window.onselect = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> - функция</li> +</ul> + +<h2 id="Example" name="Example">Пример</h2> + +<pre class="brush: html"><html> +<head> + +<title>onselect test</title> + +<style type="text/css"> +.text1 { border: 2px solid red; } +</style> + +<script type="text/javascript"> + +window.onselect = selectText; + +function selectText() +{ + alert("select event detected!"); +} +</script> +</head> + +<body> +<textarea class="text1" cols="30" rows="3"> +Highlight some of this text +with the mouse pointer +to fire the onselect event. +</textarea> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">Замечание</h2> + +<p>Событие select происходит только, когда текст выделяют в поле input с type='text' или в поле textarea. Событие происходит только после того, как текст будет выделен.</p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/ru/web/api/globaleventhandlers/onsubmit/index.html b/files/ru/web/api/globaleventhandlers/onsubmit/index.html new file mode 100644 index 0000000000..35b3a7d1f0 --- /dev/null +++ b/files/ru/web/api/globaleventhandlers/onsubmit/index.html @@ -0,0 +1,65 @@ +--- +title: GlobalEventHandlers.onsubmit +slug: Web/API/GlobalEventHandlers/onsubmit +translation_of: Web/API/GlobalEventHandlers/onsubmit +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>Обработчик события отправки формы</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="eval">window.onsubmit = <em>funcRef</em>; +</pre> + +<h3 id="Параметры">Параметры</h3> + +<ul> + <li><code>funcRef</code> – ссылка на функцию.</li> +</ul> + +<h2 id="Пример">Пример</h2> + +<pre class="eval"><html> +<script> +function reg() { + window.captureEvents(Event.SUBMIT); + window.onsubmit = hit; +} + +function hit() { + console.log('hit'); +} +</script> + +<body onload="reg();"> +<form> + <input type="submit" value="submit" /> +</form> +<div id="d"> </div> +</body> +</html> +</pre> + +<h2 id="Замечания">Замечания</h2> + +<p>Событие <code>submit</code> возникает, когда пользователь кликает на кнопку "Отправить" в форме (<code><input type="submit"/></code>)</p> + +<p>Событие <code>submit</code> не возникает, когда пользователь вызывает функцию <code>form.submit()</code> напрямую</p> + +<h2 id="Спецификации">Спецификации</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-onsubmit','onsubmit')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> |