diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/events | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip |
unslug es: move
Diffstat (limited to 'files/es/web/events')
-rw-r--r-- | files/es/web/events/abort/index.html | 68 | ||||
-rw-r--r-- | files/es/web/events/animationend/index.html | 81 | ||||
-rw-r--r-- | files/es/web/events/beforeunload/index.html | 215 | ||||
-rw-r--r-- | files/es/web/events/blur/index.html | 156 | ||||
-rw-r--r-- | files/es/web/events/domcontentloaded/index.html | 148 | ||||
-rw-r--r-- | files/es/web/events/load/index.html | 125 | ||||
-rw-r--r-- | files/es/web/events/loadend/index.html | 91 | ||||
-rw-r--r-- | files/es/web/events/pointerlockchange/index.html | 80 | ||||
-rw-r--r-- | files/es/web/events/transitioncancel/index.html | 163 | ||||
-rw-r--r-- | files/es/web/events/transitionend/index.html | 183 |
10 files changed, 0 insertions, 1310 deletions
diff --git a/files/es/web/events/abort/index.html b/files/es/web/events/abort/index.html deleted file mode 100644 index 641d144c77..0000000000 --- a/files/es/web/events/abort/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -<p>The <code>abort</code> event is fired when the loading of a resource has been aborted.</p> - -<h2 id="Información_general">Información general</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">UIEvent if generated from a user interface, Event otherwise.</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> diff --git a/files/es/web/events/animationend/index.html b/files/es/web/events/animationend/index.html deleted file mode 100644 index 8bca8b046f..0000000000 --- a/files/es/web/events/animationend/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: animationend -slug: Web/Events/animationend -translation_of: Web/API/HTMLElement/animationend_event ---- -<p>El evento <code>animationend</code> es lanzado cuando una animación CSS se ha completado.</p> - -<h2 id="Información_General">Información General</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Si</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Document, Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propiedad</th> - <th scope="col">Tipo</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Does the event normally bubble?</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Is it possible to cancel the event?</td> - </tr> - <tr> - <td><code>animationName</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The name of the CSS property associated with the transition.</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> - <td>Float</td> - <td>The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for <code>animation-delay</code>, in which case the event will be fired with an elapsedTime of (-1 * delay).</td> - </tr> - </tbody> -</table> - -<h2 id="Eventos_relacionados">Eventos relacionados</h2> - -<ul> - <li>{{Event("animationstart")}}</li> - <li>{{Event("animationend")}}</li> - <li>{{Event("animationiteration")}}</li> -</ul> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> -</ul> diff --git a/files/es/web/events/beforeunload/index.html b/files/es/web/events/beforeunload/index.html deleted file mode 100644 index 98fb747ae9..0000000000 --- a/files/es/web/events/beforeunload/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: beforeunload -slug: Web/Events/beforeunload -translation_of: Web/API/Window/beforeunload_event ---- -<div>El evento <strong>beforeunload</strong> es disparado cuando la ventana, el documento y sus recursos estan a punto de ser descargados. El documento todavia es visible y el evento todavia es cancelable en este punto.</div> - -<div> </div> - -<p>Si es asignado un string a la propiedad del objeto Evento returnValue, una caja de dialogo aparece, preguntando al usuario que confirme que dejara la pagina(mirar el ejemplo de abajo). Algunos navegadores muestran el string devuelto en una caja de dialogos, otros muestran un mensaje fijo. Si no se provee ningun valor, el evento procede silenciosamente.</p> - -<div class="note"> -<p><strong>Nota:</strong>Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <td>Burbujas</td> - <td>No</td> - </tr> - <tr> - <td>Cancelable</td> - <td>Si</td> - </tr> - <tr> - <td>Objetos de destino</td> - <td>defaultView</td> - </tr> - <tr> - <td>Interfaz</td> - <td>{{domxref("Event")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propiedad</th> - <th scope="col">Tipo</th> - <th scope="col">Descripcion</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>El evento objetivo(el objetivo superior en el arbol del DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>El tipo de evento.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readOnlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>El evento normalmente burbujea?</td> - </tr> - <tr> - <td><code>cancelable</code> {{readOnlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Es posible cancelar el evento?</td> - </tr> - <tr> - <td><code>returnValue</code></td> - <td>{{domxref("DOMString")}}</td> - <td>El valor actual devuelto por el evento (el mensaje que se le mostrara al usuario).</td> - </tr> - </tbody> -</table> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush:js;">window.addEventListener("beforeunload", function (event) { - event.returnValue = "\o/"; -}); - -// es equivalente a -window.addEventListener("beforeunload", function (event) { - event.preventDefault(); -});</pre> - -<p>Navegadores basados en WebKit no siguen las especificaciones para la caja de dialogos. Un ejemplo que funcione con distintos navegadores seria similar al siguiente:</p> - -<pre class="brush: js">window.addEventListener("beforeunload", function (e) { - var confirmationMessage = "\o/"; - - e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+ - return confirmationMessage; // Gecko, WebKit, Chrome <34 -});</pre> - -<h2 id="Notas">Notas</h2> - -<p>A partir del 25 de Mayo del 2011, la especificion HTML5 establece que llamadas a los metodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, y {{domxref("window.prompt()")}}pueden ser ignoradas durante este evento.Mire las <a href="http://www.w3.org/TR/html5/webappapis.html#user-prompts">especificaciones de HTML5</a> para mas detalles.</p> - -<p>Varios navegadores ignoran el resultado del evento y no le preguntan al usuario por confirmacion en absoluto. El documento siempre se descargara automaticamente. Firefox tiene un switch llamado dom.disable_beforeunload en <a>about:config</a> para habilitar este comportamiento.</p> - -<p>Usando este manejador de evento tu pagina previene que Firefox cambie el cache de la pagina a uno en memoria bfcache. Mire <a href="en/Using_Firefox_1.5_caching">Usando el almacenamiento en cache Firefox 1.5</a> para detalles.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificacion</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>Definicion inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracteristica</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>Soporte basico</td> - <td>{{CompatChrome(1.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>1</td> - <td>4</td> - <td>12</td> - <td>3</td> - </tr> - <tr> - <td>Texto personalizado soporte removido</td> - <td>{{CompatChrome(51.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("44.0")}}</td> - <td> </td> - <td>38</td> - <td><a href="https://developer.apple.com/library/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9_1.html">9.1</a></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracteristica</th> - <th>Android</th> - <th>Android Webview</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>(no) <a href="https://bugs.webkit.org/show_bug.cgi?id=19324">defect</a></td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Texto personalizado soporte removido</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(51.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("44.0")}}</td> - <td> </td> - <td> </td> - <td> </td> - <td>{{CompatChrome(51.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Mire_tambien">Mire tambien</h2> - -<ul> - <li>{{Event("DOMContentLoaded")}}</li> - <li>{{Event("readystatechange")}}</li> - <li>{{Event("load")}}</li> - <li>{{Event("unload")}}</li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Confirmacion para descargar un documento</a></li> - <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeload_dialogs">Remover mensajes personalizados en dialogos onbeforeload despues de Chrome 51</a> </li> -</ul> diff --git a/files/es/web/events/blur/index.html b/files/es/web/events/blur/index.html deleted file mode 100644 index b54ad3e6a6..0000000000 --- a/files/es/web/events/blur/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: blur (evento) -slug: Web/Events/blur -tags: - - DOM -translation_of: Web/API/Element/blur_event ---- -<p>El evento <code>blur</code> es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y <code><a href="/en-US/docs/Mozilla_event_reference/focusout">focusout</a></code> es que sólo el último se propaga (bubbles).</p> - -<h2 id="Información_General">Información General</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Burbujas</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt> - <dd style="margin: 0 0 0 120px;">Ninguna.</dd> -</dl> - -<p>{{NoteStart}}El valor de {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ({{bug(452307)}}): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.{{NoteEnd}}</p> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propiedad</th> - <th scope="col">Tipo</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>Objetivo del evento (elemento DOM)</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>El tipo de evento.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Si el elemento normalmente se propaga o no.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Si el evento es cancelable o no.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}} (DOM element)</td> - <td>null</td> - </tr> - </tbody> -</table> - -<h2 id="Delegación_de_eventos">Delegación de eventos</h2> - -<p>Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento <code>focusout</code> en exploradores que lo soporten, o cambiando el parámetro "useCapture" de <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> a <code>true</code>:</p> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<pre class="brush:html;"><form id="form"> - <input type="text" placeholder="text input"> - <input type="password" placeholder="password"> -</form></pre> - -<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> - -<pre class="brush: js">var form = document.getElementById("form"); -form.addEventListener("focus", function( event ) { - event.target.style.background = "pink"; -}, true); -form.addEventListener("blur", function( event ) { - event.target.style.background = ""; -}, true);</pre> - -<p>{{EmbedLiveSample('Delegación_de_eventos')}}</p> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>5</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>6</td> - <td>12.1</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>4.0</td> - <td>53</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>10.0</td> - <td>12.1</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Antes de Gecko 24 {{geckoRelease(24)}} la interfaz para este evento era {{domxref("Event")}}, no {{domxref("FocusEvent")}}. Vea ({{bug(855741)}}).</p> - -<h2 id="Eventos_relacionados">Eventos relacionados</h2> - -<ul> - <li>{{event("focus")}}</li> - <li>{{event("blur")}}</li> - <li>{{event("focusin")}}</li> - <li>{{event("focusout")}}</li> -</ul> diff --git a/files/es/web/events/domcontentloaded/index.html b/files/es/web/events/domcontentloaded/index.html deleted file mode 100644 index ffbf3accbc..0000000000 --- a/files/es/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -translation_of: Web/API/Window/DOMContentLoaded_event ---- -<p>El evento <code>DOMContentLoaded</code> es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para finalizar la carga. Un evento muy diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> cuando <code>DOMContentLoaded</code> sería mucho más apropiado, así que úsalo con cuidado.</p> - -<p>JavaScript síncrono pausa el parseo del DOM.</p> - -<p>También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.</p> - -<h2 id="Speeding_up">Speeding up</h2> - -<p>If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchronous</a> and to <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimize loading of stylesheets</a> which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.</p> - -<h2 id="General_info">General info</h2> - -<dl> - <dt style="width: 120px; text-align: right; float: left;">Specification</dt> - <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> - <dt style="width: 120px; text-align: right; float: left;">Interface</dt> - <dd style="margin: 0px 0px 0px 120px;">Event</dd> - <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt> - <dd style="margin: 0px 0px 0px 120px;">Yes</dd> - <dt style="width: 120px; text-align: right; float: left;">Cancelable</dt> - <dd style="margin: 0px 0px 0px 120px;">Yes (although specified as a simple event that isn't cancelable)</dd> - <dt style="width: 120px; text-align: right; float: left;">Target</dt> - <dd style="margin: 0px 0px 0px 120px;">Document</dd> - <dt style="width: 120px; text-align: right; float: left;">Default Action</dt> - <dd style="margin: 0px 0px 0px 120px;">None.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Example">Example</h2> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); -</script> -</pre> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); - -for(var i=0; i<1000000000; i++) -{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later. -</script> -</pre> - -<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>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> - <td>9.0<sup>[2]</sup></td> - <td>9.0</td> - <td>3.1<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}<sup>[2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</p> - -<p>[2] Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.</p> - -<h2 id="Related_Events">Related Events</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> diff --git a/files/es/web/events/load/index.html b/files/es/web/events/load/index.html deleted file mode 100644 index f38e214839..0000000000 --- a/files/es/web/events/load/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - Evento -translation_of: Web/API/Window/load_event ---- -<p>El evento <code>load</code> se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.</p> - -<p> </p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 class="brush: html" id="Window">Window</h3> - -<pre class="brush: html"><script> - window.addEventListener("load", function(event) { - console.log("'Todos los recursos terminaron de cargar!"); - }); -</script></pre> - -<h3 id="Elemento_script">Elemento <code>script</code></h3> - -<pre class="brush: html"><script> - var script = document.createElement("script"); - script.addEventListener("load", function(event) { - console.log("Script terminó de cargarse y ejecutarse"); - }); - script.src = "http://example.com/example.js"; - script.async = true; - document.getElementsByTagName("script")[0].parentNode.appendChild(script); -</script></pre> - -<h2 id="Información_general">Información general</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> - <dd style="margin: 0 0 0 120px;">UIEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Propagación</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt> - <dd style="margin: 0 0 0 120px;">Window,Document,Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Por defecto Acción</dt> - <dd style="margin: 0 0 0 120px;">None.</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propiedad</th> - <th scope="col">Tipo</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td><code>{{domxref("EventTarget")}}</code></td> - <td>El objetivo del evento (el objetivo superior en el árbol DOM).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td><code>{{domxref("DOMString")}}</code></td> - <td>El tipo de evento.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td><code>{{domxref("Boolean")}}</code></td> - <td>Si el elemento normalmente se propaga (bubbles) o no.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td><code>{{domxref("Boolean")}}</code></td> - <td>Si el evento es cancelable o no.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><code>{{domxref("WindowProxy")}}</code></td> - <td><code>{{domxref("Document.defaultView", "document.defaultView")}}</code> (<code>window</code> del documento)</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#event-type-load', 'load')}}</td> - <td>{{Spec2('UI Events')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Esto enlaza con la sección en los pasos que se llevan a cabo al final de cargar un documento. Los eventos 'load' también se disparan a muchos elementos. Y tenga en cuenta que hay muchos lugares en la especificación que hacen referencia a cosas que pueden "<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">retrasar el evento de carga</a>".</td> - </tr> - </tbody> -</table> - -<h2 id="Eventos_relacionados">Eventos relacionados</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> diff --git a/files/es/web/events/loadend/index.html b/files/es/web/events/loadend/index.html deleted file mode 100644 index 39e528634d..0000000000 --- a/files/es/web/events/loadend/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: loadend -slug: Web/Events/loadend -tags: - - eventos -translation_of: Web/API/XMLHttpRequest/loadend_event ---- -<p>El evento <code>loadend</code> es emitido cuando el progreso de la carga de un recurso se ha detenido (e.g. despues que "error", "abort", o "load" han sido emitidos). Por ejemplo, esto aplica a las llamadas de {{domxref("XMLHttpRequest")}}, y al contenido de un elemento {{htmlelement("img")}} o {{htmlelement("video")}}.</p> - -<h2 id="Información_General">Información General</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> - <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("HTMLImageElement")}}, Por Ejemplo</dd> - <dt style="float: left; text-align: right; width: 120px;">Acción por Defecto</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>lengthComputable </code>{{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Specifies whether or not the total size of the transfer is known. Read only.</td> - </tr> - <tr> - <td><code>loaded</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.</td> - </tr> - <tr> - <td><code>total</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.</td> - </tr> - </tbody> -</table> - -<h2 id="Eventos_Relacionados">Eventos Relacionados</h2> - -<ul> - <li>{{event("loadstart")}}</li> - <li>{{event("progress")}}</li> - <li>{{event("error")}}</li> - <li>{{event("abort")}}</li> - <li>{{event("load")}}</li> - <li>{{event("loadend")}}</li> -</ul> - -<h2 id="Ver_También">Ver También</h2> - -<ul> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Monitoreando progreso</a></li> -</ul> diff --git a/files/es/web/events/pointerlockchange/index.html b/files/es/web/events/pointerlockchange/index.html deleted file mode 100644 index 2d5af4205b..0000000000 --- a/files/es/web/events/pointerlockchange/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: pointerlockchange -slug: Web/Events/pointerlockchange -translation_of: Web/API/Document/pointerlockchange_event ---- -<p>El evento <code>pointerlockchange</code> es disparado cuando el cursor del navegador es bloqueado o desbloqueado.</p> - -<h2 id="Información_general">Información general</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Document</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush:js;">//Ten en cuenta que el nombre del evento, en este caso "pointerlockchange" puede variar según el navegador. -document.addEventListener("pointerlockchange", function( event ) { - // El objetivo, parámetro "target", del objeto "event" es siempre el objeto "document". - // para recuperar el objeto que recibe el bloqueo/desbloqueo es document.pointerlockElement. - document.pointerLockElement; - -}); -</pre> - -<h2 id="Eventos_relacionados">Eventos relacionados</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/pointerlockerror"><code>pointerlockerror</code></a></li> -</ul> - -<h2 id="Véase_también">Véase también:</h2> - -<ul> - <li><a href="/en-US/docs/API/Pointer_Lock_API">Using Pointer Lock API</a></li> -</ul> diff --git a/files/es/web/events/transitioncancel/index.html b/files/es/web/events/transitioncancel/index.html deleted file mode 100644 index 3f9c622bd2..0000000000 --- a/files/es/web/events/transitioncancel/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: transitioncancel -slug: Web/Events/transitioncancel -tags: - - DOM - - Evento - - Referencia - - eventos -translation_of: Web/API/HTMLElement/transitioncancel_event ---- -<p>{{SeeCompatTable}}</p> - -<p>El evento <code>transitioncancel</code> es lanzado cuando una <a href="/en-US/docs/CSS/Using_CSS_transitions">transición CSS</a> es cancelada.</p> - -<p>Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.</p> - -<h2 id="Información_general">Información general</h2> - -<dl> - <dt>Interfaz</dt> - <dd>{{domxref("TransitionEvent")}}</dd> - <dt>Burbuja</dt> - <dd>Sí</dd> - <dt>Cancelable</dt> - <dd>No</dd> - <dt>Objetivo</dt> - <dd>{{domxref("document")}}, {{domxref("element")}}</dd> - <dt>Acción por defecto</dt> - <dd>Ninguna</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Propiedad</th> - <th scope="col">Tipo</th> - <th scope="col">Descripción</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyinline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>El objetivo del evento (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyinline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>El tipo de evento.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyinline}}</td> - <td>{{domxref("Boolean")}}</td> - <td>Si el evento normalmente se propaga o no</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyinline}}</td> - <td>{{domxref("Boolean")}}</td> - <td>Si el evento es cancelable o no</td> - </tr> - <tr> - <td><code>propertyName</code>{{readonlyinline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>El nombre de la propiedad CSS asociada con la transición.</td> - </tr> - <tr> - <td><code>elapsedTime</code>{{readonlyinline}}</td> - <td>{{domxref("Float")}}</td> - <td> - <p>La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de <code>transition-delay</code>.</p> - </td> - </tr> - <tr> - <td><code>pseudoElement</code>{{readonlyinline}}</td> - <td>{{domxref("DOMString")}}</td> - <td> - <p>El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(53)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(53)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>El manejador {{domxref("GlobalEventHandlers.ontransitioncancel")}}</li> - <li>La interfaz {{domxref("TransitionEvent")}}</li> - <li>{{event("transitionstart")}}, {{event("transitionend")}}</li> - <li>Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li> -</ul> diff --git a/files/es/web/events/transitionend/index.html b/files/es/web/events/transitionend/index.html deleted file mode 100644 index 8370f0e39e..0000000000 --- a/files/es/web/events/transitionend/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: transitionend -slug: Web/Events/transitionend -tags: - - DOM - - Event - - Referencia - - Transiciones CSS - - Transiciones CSS3 - - TransitionEvent - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event ---- -<p>El evento <code>transitionend</code> es lanzado cuando una <a href="/en-US/docs/CSS/Using_CSS_transitions">transición CSS</a> se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a <code>"none"</code>, entonces el evento no será generado.</p> - -<h2 id="Información_general">Información general</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> - <dd style="margin: 0 0 0 120px;">{{SpecName("CSS3 Transitions")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("TransitionEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Burbuja</dt> - <dd style="margin: 0 0 0 120px;">Sí</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">Sí</dd> - <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Acción</dt> - <dd style="margin: 0 0 0 120px;">undefined</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>propertyName</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The name of the CSS property associated with the transition.</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{readonlyInline}}</td> - <td>Float</td> - <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td> - </tr> - <tr> - <td><code>pseudoElement</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td> - </tr> - </tbody> -</table> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Este ejemplo establece un manejador de evento para detectar el evento <code>transitionend</code>, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.</p> - -<pre class="brush: js">let element = document.getElementById("slidingMenu"); -element.addEventListener("transitionend", function(event) { - element.innerHTML = "Done!"; -}, false); -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}</td> - <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Definición inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</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>Soporte básico</td> - <td>1.0<sup>[1]</sup><br> - 36</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>10.5<sup>[2]</sup><br> - 12<br> - 12.10<br> - 23</td> - <td>3.2<sup>[1]</sup><br> - 7.0.6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>10<sup>[2]</sup><br> - 12<br> - 12.10</td> - <td>3.2<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como <code>webkitTransitionEnd</code>. Chrome 36 y WebKit 7.0.6 usan el estándar <code>transitionend</code>.</p> - -<p>[2] Implementado como <code>oTransitionEnd</code> desde Opera 10.5, como <code>otransitionend</code> desde la versión 12 y como el estándar <code>transitionend</code> desde la versión 12.10.</p> - -<h2 id="Véase_también">Véase también</h2> - -<p>La interfaz {{domxref("TransitionEvent")}}</p> - -<ul> - <li>{{event("transitionstart")}}, {{event("transitioncancel")}}</li> - <li>Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li> -</ul> |