diff options
Diffstat (limited to 'files/es/web/api/event')
| -rw-r--r-- | files/es/web/api/event/bubbles/index.html | 47 | ||||
| -rw-r--r-- | files/es/web/api/event/cancelable/index.html | 38 | ||||
| -rw-r--r-- | files/es/web/api/event/createevent/index.html | 34 | ||||
| -rw-r--r-- | files/es/web/api/event/currenttarget/index.html | 75 | ||||
| -rw-r--r-- | files/es/web/api/event/defaultprevented/index.html | 81 | ||||
| -rw-r--r-- | files/es/web/api/event/event/index.html | 80 | ||||
| -rw-r--r-- | files/es/web/api/event/index.html | 185 | ||||
| -rw-r--r-- | files/es/web/api/event/initevent/index.html | 42 | ||||
| -rw-r--r-- | files/es/web/api/event/preventdefault/index.html | 95 | ||||
| -rw-r--r-- | files/es/web/api/event/stoppropagation/index.html | 103 | ||||
| -rw-r--r-- | files/es/web/api/event/target/index.html | 138 | ||||
| -rw-r--r-- | files/es/web/api/event/type/index.html | 103 |
12 files changed, 1021 insertions, 0 deletions
diff --git a/files/es/web/api/event/bubbles/index.html b/files/es/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..a940b1e4a7 --- /dev/null +++ b/files/es/web/api/event/bubbles/index.html @@ -0,0 +1,47 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - Anidado + - DOM + - Propagación + - Referencia + - Referência(2) + - eventos +translation_of: Web/API/Event/bubbles +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Indica si el evento determinado <em>se propaga</em> (burbujea) a través del DOM o no. Esta propagación se refiere a si el evento viaja desde el elemento donde se originó hasta los elementos padres<font face="Consolas, Monaco, Andale Mono, monospace"> </font>en orden de anidamiento.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><em>e</em>vent.bubbles +</pre> + +<p>Retorna un valor Booleano que es <code>true</code> si el evento se propaga en el DOM.</p> + +<h3 id="Ejemplo_2">Ejemplo</h3> + +<pre>var bool = event.bubbles;</pre> + +<p><code>bool</code> tiene el valor <code>true</code> o <code>false</code>, dependiendo de si el evento puede ser burbuja o no.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Sólo ciertos eventos pueden ser burbuja. Los eventos que pueden ser burbuja tienen esta propiedad con el valor <code>true</code>. Podemos usar esta propiedad para comprobar si un elemento puede ser burbuja o no.</p> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre> function goInput(e) { + // comprueba si es burbuja y + if (!e.bubbles) { + // entrega el evento si no lo es + passItOn(e); + } + // está siendo propagado + doOutput(e) +} +</pre> diff --git a/files/es/web/api/event/cancelable/index.html b/files/es/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..efb6eb04f6 --- /dev/null +++ b/files/es/web/api/event/cancelable/index.html @@ -0,0 +1,38 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/cancelable +--- +<div>{{ ApiRef("DOM") }}</div> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Indica si el elemento puede ser cancelado o no.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><i>bool</i> = +<i>event</i>.cancelable; +</pre> + +<p><code>bool</code> tiene valor <code>true</code> o <code>false</code>, dependiendo de si el evento puede ser desactivado.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Si un evento puede ser cancelado o no, es algo que se determina en el momento en que el evento es inicializado.</p> + +<p>Para cancelar un evento, llama al método <a href="es/DOM/event.preventDefault">preventDefault</a> en el evento. Esto evita que la tarea de implementación ejecute la acción por defecto asociada con el evento.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-canCancel">DOM Level 2 Events: cancelable</a></p> + +<p> </p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}</p> diff --git a/files/es/web/api/event/createevent/index.html b/files/es/web/api/event/createevent/index.html new file mode 100644 index 0000000000..0d04851789 --- /dev/null +++ b/files/es/web/api/event/createevent/index.html @@ -0,0 +1,34 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evento + - metodo +translation_of: Web/API/Document/createEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p>Crea un nuevo evento, que debe ser inicializado llamando a su método <code>init()</code>.</p> + +<h3 id="Sintaxis">Sintaxis</h3> + +<pre><code>document.createEvent(tipo);</code></pre> + +<dl> + <dt><code>tipo</code></dt> + <dd>Una string indicando el tipo de evento a crear.</dd> +</dl> + +<p>Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.</p> + +<h3 id="Ejemplo">Ejemplo</h3> + +<pre>var nuevoEvento = document.createEvent("UIEvents");</pre> + +<h3 id="Especificación">Especificación</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> diff --git a/files/es/web/api/event/currenttarget/index.html b/files/es/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..0c9d9a2a9e --- /dev/null +++ b/files/es/web/api/event/currenttarget/index.html @@ -0,0 +1,75 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - DOM + - Gecko + - Property +translation_of: Web/API/Event/currentTarget +--- +<p>{{APIRef("DOM")}}</p> + +<p>Identifica el target (objetivo) actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elmento al cual el controlador del evento fue asociado, a diferencia de <code>event.target</code>, que identifica el elemento el el que se produjo el evento.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Es interesante utilizar <code>event.currentTarget</code> cuando se asocia un mismo controlador de eventos a varios elementos.</p> + +<pre class="brush: js">function hide(e){ + e.currentTarget.style.visibility = "hidden"; + console.log(e.currentTarget); + // Cuando esta función es usada como un controlador de evento: this === e.currentTarget +} + +var ps = document.getElementsByTagName('p'); + +for(var i = 0; i < ps.length; i++){ + // console: imprime el elemento pulsado <p> + ps[i].addEventListener('click', hide, false); +} +// console: imprime <body> +document.body.addEventListener('click', hide, false); + +// hace desaparecer párrafos al hacer click alrededor +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("api.Event.currentTarget")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<p><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparativa de Event Targets</a></p> diff --git a/files/es/web/api/event/defaultprevented/index.html b/files/es/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..ff1f9fba79 --- /dev/null +++ b/files/es/web/api/event/defaultprevented/index.html @@ -0,0 +1,81 @@ +--- +title: event.defaultPrevented +slug: Web/API/Event/defaultPrevented +translation_of: Web/API/Event/defaultPrevented +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Resumen">Resumen</h3> + +<p>Retorna un boleano indicando si {{ domxref("event.preventDefault()") }} fue llamado en el evento o no.</p> + +<div class="note"><strong>Nota:</strong> Deberías usar este en lugar del que no es estándar, el método obsoleto <code>getPreventDefault()</code> (ver {{ bug(691151) }}).</div> + +<h3 id="Sintaxis">Sintaxis</h3> + +<pre class="eval">bool = event.defaultPrevented </pre> + +<h3 id="Ejemplo">Ejemplo</h3> + +<pre> if (e.defaultPrevented) { + /* El evento por defecto fue prevenido */ + } +</pre> + +<h3 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h3> + +<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</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatChrome(18) }}</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{ CompatIE(9.0) }}</td> + <td>{{ CompatOpera(11.0) }}</td> + <td>{{ CompatSafari("5.0") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</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>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatSafari(5.0) }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Especificación">Especificación</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html#Events-Event-defaultPrevented" title="http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/events.html#Events-Event-defaultPrevented">DOM 3 Events</a></li> +</ul> + +<p>{{ languages( {"zh-cn": "zh-cn/DOM/event.defaultPrevented" } ) }}</p> diff --git a/files/es/web/api/event/event/index.html b/files/es/web/api/event/event/index.html new file mode 100644 index 0000000000..b1410daf7b --- /dev/null +++ b/files/es/web/api/event/event/index.html @@ -0,0 +1,80 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>El constructor <code><strong>Event()</strong></code> crea un nuevo {{domxref("Event")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><em>typeArg</em></dt> + <dd>Es un {{domxref("DOMString")}} que representa el nombre del evento.</dd> + <dt><em>eventInit </em>{{optional_inline}}</dt> +</dl> + +<dl> + <dd>Es un <code>EventInit</code> dictionary, con los siguientes campos: + + <ul> + <li><code>"bubbles"</code>: (Opcional) {{jsxref("Boolean")}} indica si el evento se propaga. Por defecto es <code>false</code>.</li> + <li><code>"cancelable"</code>: (Opcional) A {{jsxref("Boolean")}} indica si el evento puede ser cancelado. Por defecto es <code>false</code>.</li> + <li><code>"scoped"</code>: (Opcional) {{jsxref("Boolean")}} indica el ámbito de propagación. Si el valor es <code>true</code>, <code>deepPath</code> contendrá el nodo de destino.</li> + <li><code>"composed"</code>: (Opcional) {{jsxref("Boolean")}} que indica si el evento disparará listeners fuera de un shadow root. Por defecto es <code>false</code>.<span style="display: none;"> </span></li> + </ul> + </dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js">// crea un evento look que se propaga y no puede cancelarse + +var ev = new Event("look", {"bubbles":true, "cancelable":false}); +document.dispatchEvent(ev); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('Shadow DOM','#widl-EventInit-scoped', 'scoped')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td>Añade ámbito a <code>EventInit</code> dictionary.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p> </p> + + + +<p>{{Compat("api.Event.Event")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/es/web/api/event/index.html b/files/es/web/api/event/index.html new file mode 100644 index 0000000000..67cc05b076 --- /dev/null +++ b/files/es/web/api/event/index.html @@ -0,0 +1,185 @@ +--- +title: evento +slug: Web/API/Event +tags: + - para_revisar +translation_of: Web/API/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p>« <a href="/es/Referencia_DOM_de_Gecko" title="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a></p> + +<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3> + +<p>Éste capítulo describe el Modelo De Evento DOM de nivel 2 como es implementado por <a href="/es/Gecko" title="es/Gecko">Gecko</a>. La propia interfaz de <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Evento</a> es descrita, así como las interfaces para el registro de evento sobre los nodos en el DOM, manipuladores y "oyentes" (<code>listeners</code>) de eventos, y varios ejemplos mas extensos que muestran como las varias interfaces de evento se relacionan unas con las otras.</p> + +<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-flow">DOM Level 3 Events draft</a>.</p> + +<h4 id="La_interfaz_evento_.28Event.29_de_DOM" name="La_interfaz_evento_.28Event.29_de_DOM">La interfaz evento (<code>Event</code>) de DOM</h4> + +<p>Los gestores de eventos pueden estar atados a varios elementos en el DOM. Cuando un evento ocurre, un objeto de evento es dinámicamente creado y pasado secuencialmente a las "escuchas" (<small>listeners</small>) autorizadas para la gestión del evento. La interfaz <code>Event</code> del DOM es entonces accesible por la función de manejo, vía el objeto de evento puesto como el primer (y único) argumento.</p> + +<p><span class="comment">Given that we don't list the three ways right here, the sentence is unclear, and is not perfectly right either IMO. -Nickolay There are three ways to attach an event listener to an element. With 2 of those techniques, the event object is passed to the handler function implicitly. The remaining technique requires you to specify the <code>event</code> object as a parameter, which is passed explicitly to the event handler function.</span> El ejemplo siguiente muestra como un objeto de evento es pasado a una función de gestión de evento, y puede llamarse desde otra parecida.</p> + +<p>El parámetro "evt" no es pasado en el código de abajo, el objeto de evento es cambiado automáticamente a <em>foo</em>. Todo lo necesario es definir un parámetro en el gestor de evento para recibir el objeto de evento.</p> + +<pre>function foo(evt) { + // Las funciones de gestión como esta + // dan una referencia implícita del + // evento que toca manejar + // (en este caso se llama "evt"). + alert(evt); +} +table_el.onclick = foo; +</pre> + +<p>Este ejemplo es muy simple pero muestra una característica importante de los eventos en el DOM de Gecko, la cual es que en el DOM se accede a los objetos de eventos a través de las funciones de manejo. Entonces al tener una referencia al objeto de evento, se puede llegar a todas las propiedades y métodos descritos en este capítulo.</p> + +<p>Para más detalles de como los eventos se mueven dentro del DOM, ver: <a href="/es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_5:_Propagaci.C3.B3n_de_evento" title="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_5:_Propagaci.C3.B3n_de_evento">Ejemplo 5: Propagación de evento</a></p> + +<h4 id="Lista_de_los_gestores_de_evento_del_DOM" name="Lista_de_los_gestores_de_evento_del_DOM">Lista de los gestores de evento del DOM</h4> + +<p>Además del objeto <code>event</code> descrito aquí, el Gecko DOM también proporciona métodos para registrar oyentes de eventos en nodos en el DOM, quitando aquellos oyentes de eventos, y enviando eventos desde el DOM.</p> + +<p>Estos y los varios <a href="/es/DOM/element#Manejo_de_los_eventos" title="es/DOM/element#Manejo_de_los_eventos">manejos de eventos</a> de elementos HTML o XML son los puntos de entrada principales para los eventos en el DOM. Estos tres métodos se describen en la lista de <a href="/es/DOM/element" title="es/DOM/element">referencia al elemento</a>.</p> + +<p>Puede también pasar la referencia del objeto del evento como un parámetro predefinido, llamado <code>event</code>, a la función que maneja el evento. Esto es muy parecido a la forma en que trabaja <code>this</code>, pero para objetos de eventos, más bien que las referencias del objeto del elemento.</p> + +<pre><html> +<head> +<title>Ejemplo de parámetro de objeto de evento</title> + +<script type="text/javascript"> + +function showCoords(event){ + alert( + "clientX value: " + event.clientX + "\n" + + "clientY value: " + event.clientY + "\n" + ); +} + +</script> +</head> + +<body onmousedown="showCoords(event)"> +<p>Para ver las coordinadas del ratón +haga clic en cualquier lugar de esta página.</p> +</body> +</html> +</pre> + +<p>El parámetro predefinido del objeto <code>event</code> permite pasar tantos parámetros de gestión de evento como sea necesario:</p> + +<pre><html> +<head> +<title>Ejemplo de objeto con varios parámetros</title> + +<script type="text/javascript"> + +var par2 = 'hello'; +var par3 = 'world!'; + +function muestraCoords(evt, p2, p3){ + alert( + "clienteX value: " + evt.clientX + "\n" + + "clientY value: " + evt.clientY + "\n" + + "p2: " + p2 + "\n" + + "p3: " + p3 + "\n" + ); +} + +</script> +</head> + +<body onmousedown="muestraCoords(event, par2, par3)"> +<p>Para ver las coordinadas del ratón +haga clic en cualquier lugar de esta página.</p> +</body> +</html> +</pre> + +<h3 id="Propiedades" name="Propiedades">Propiedades</h3> + +<dl> + <dt><a href="/es/DOM/event.altKey" title="es/DOM/event.altKey">event.altKey</a> </dt> + <dd>Devuelve un valor indicando si la tecla <code><alt></code> fue pulsada durante el evento.</dd> + <dt><a href="/es/DOM/event.bubbles" title="es/DOM/event.bubbles">event.bubbles</a> </dt> + <dd>Devuelve un valor que indica si el evento se propaga hacia arriba a través del DOM o no.</dd> + <dt><a href="/es/DOM/event.button" title="es/DOM/event.button">event.button</a> </dt> + <dd>Devuelve el botón del ratón.</dd> + <dt><a href="/es/DOM/event.cancelBubble" title="es/DOM/event.cancelBubble">event.cancelBubble</a> {{deprecated_inline}} </dt> + <dd>Devuelve un valor que indica si la propagación hacia arriba fue cancelada o no.</dd> + <dt><a href="/es/DOM/event.cancelable" title="es/DOM/event.cancelable">event.cancelable</a> </dt> + <dd>Devuelve un valor que indica si el evento se puede cancelar.</dd> + <dt><a href="/es/DOM/event.charCode" title="es/DOM/event.charCode">event.charCode</a> </dt> + <dd>Devuelve el valor Unicode de una tecla de carácter que fue apretada como parte de un evento <a href="/es/DOM/event/keypress" title="es/DOM/event/keypress">keypress</a>.</dd> + <dt><a href="/es/DOM/event.clientX" title="es/DOM/event.clientX">event.clientX</a> </dt> + <dd>Devuelve la posición horizontal del evento.</dd> + <dt><a href="/es/DOM/event.clientY" title="es/DOM/event.clientY">event.clientY</a> </dt> + <dd>Devuelve la posición vertical del evento.</dd> + <dt><a href="/es/DOM/event.ctrlKey" title="es/DOM/event.ctrlKey">event.ctrlKey</a> </dt> + <dd>Devuelve un valor que indica si la tecla <code><Ctrl></code> fue apretada durante el evento.</dd> + <dt><a href="/es/DOM/event.currentTarget" title="es/DOM/event.currentTarget">event.currentTarget</a> </dt> + <dd>Devuelve una referencia al objetivo actual registrado para el evento.</dd> + <dt><a href="/es/DOM/event.detail" title="es/DOM/event.detail">event.detail</a> </dt> + <dd>Devuelve detalles sobre el evento, dependiendo del tipo de evento.</dd> + <dt><a href="/es/DOM/event.eventPhase" title="es/DOM/event.eventPhase">event.eventPhase</a> </dt> + <dd>Utilizado para indicar qué fase del flujo del evento es actualmente en proceso de evaluación.</dd> + <dt><a href="/es/DOM/event.explicitOriginalTarget" title="es/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a> </dt> + <dd>El objetivo del evento (específico a Mozilla).</dd> + <dt><a href="/es/DOM/event.isChar" title="es/DOM/event.isChar">event.isChar</a> </dt> + <dd>Devuelve un valor que indica si el evento produce o no una tecla de carácter.</dd> + <dt><a href="/es/DOM/event.keyCode" title="es/DOM/event.keyCode">event.keyCode</a> </dt> + <dd>Devuelve el valor Unicode de una tecla que no es caracter en un evento <a href="/es/DOM/event/keypress" title="es/DOM/event/keypress">keypress</a> o cualquier tecla en cualquier otro tipo de evento de teclado.</dd> + <dt><a href="/es/DOM/event.layerX" title="es/DOM/event.layerX">event.layerX</a> </dt> + <dd>Devuelve la coordenada horizontal del evento relativo a la capa actual.</dd> + <dt><a href="/es/DOM/event.layerY" title="es/DOM/event.layerY">event.layerY</a> </dt> + <dd>Devuelve la coordenada vertical del evento relativo a la capa actual.</dd> + <dt><a href="/es/DOM/event.metaKey" title="es/DOM/event.metaKey">event.metaKey</a> </dt> + <dd>Devuelve un valor booleano indicando si la <code>meta</code> tecla fue presionada durante un evento.</dd> + <dt><a href="/es/DOM/event.originalTarget" title="es/DOM/event.originalTarget">event.originalTarget</a> </dt> + <dd>El objetivo principal de un evento, antes de cualquier reapunte (Especifiación Mozilla).</dd> + <dt><a href="/es/DOM/event.pageX" title="es/DOM/event.pageX">event.pageX</a> </dt> + <dd>Devuelve la coordenada horizontal del evento, relativo al documento completo.</dd> + <dt><a href="/es/DOM/event.pageY" title="es/DOM/event.pageY">event.pageY</a> </dt> + <dd>Devuelve la coordenada vertical del evento, relativo al documento completo.</dd> + <dt><a href="/es/DOM/event.relatedTarget" title="es/DOM/event.relatedTarget">event.relatedTarget</a> </dt> + <dd>Identifica un objetivo secundario para el evento.</dd> + <dt><a href="/es/DOM/event.screenX" title="es/DOM/event.screenX">event.screenX</a> </dt> + <dd>Devuelve la coordenada horizontal del evento en la pantalla.</dd> + <dt><a href="/es/DOM/event.screenY" title="es/DOM/event.screenY">event.screenY</a> </dt> + <dd>Devuelve la coordenada vertical del evento en la pantalla.</dd> + <dt><a href="/es/DOM/event.shiftKey" title="es/DOM/event.shiftKey">event.shiftKey</a> </dt> + <dd>Devuelve un valor booleano indicando si la tecla <code><shift></code> fue presionada cuando el evento fue disparado.</dd> + <dt><a href="/es/DOM/event.target" title="es/DOM/event.target">event.target</a> </dt> + <dd>Devuelve una referencia al objetivo en la cual el evento fue originalmente enviado.</dd> + <dt><a href="/es/DOM/event.timeStamp" title="es/DOM/event.timeStamp">event.timeStamp</a> </dt> + <dd>Devuelve el momento de creación del evento.</dd> + <dt><a href="/es/DOM/event.type" title="es/DOM/event.type">event.type</a> </dt> + <dd>Devuelve el nombre del evento (distingue mayúsculas y minúsculas).</dd> + <dt><a href="/es/DOM/event.view" title="es/DOM/event.view">event.view</a> </dt> + <dd>El atributo vista identifica la <code>AbstractView</code> del cual el evento fue generado.</dd> + <dt><a href="/es/DOM/event.which" title="es/DOM/event.which">event.which</a> </dt> + <dd>Devuelve el valor Unicode de la tecla en un evento del teclado, sin importar el tipo de tecla que se presionó.</dd> +</dl> + +<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3> + +<dl> + <dt><a href="/es/DOM/event.initEvent" title="es/DOM/event.initEvent">event.initEvent</a> </dt> + <dd>Inicia el valor de un evento que se ha creado vía la interfaz <code>DocumentEvent</code>.</dd> + <dt><a href="/es/DOM/event.initKeyEvent" title="es/DOM/event.initKeyEvent">event.initKeyEvent</a> </dt> + <dd>Inicia un evento del teclado. (Específico de Gecko).</dd> + <dt><a href="/es/DOM/event.initMouseEvent" title="es/DOM/event.initMouseEvent">event.initMouseEvent</a> </dt> + <dd>Inicia un evento del ratón una vez que se ha creado.</dd> + <dt><a href="/es/DOM/event.initUIEvent" title="es/DOM/event.initUIEvent">event.initUIEvent</a> </dt> + <dd>Inicia un evento de la interfaz de usuario (<em>UI</em>) una vez que se ha creado.</dd> + <dt><a href="/es/DOM/event.preventBubble" title="es/DOM/event.preventBubble">event.preventBubble</a> {{obsolete_inline}} </dt> + <dd>Previene la expansión del evento. Este método es desaconsejado en favor del estándar <a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation">stopPropagation</a> y ha sido <a href="/es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web" title="es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web">retirado en Gecko 1.9</a>.</dd> + <dt><a href="/es/DOM/event.preventCapture" title="es/DOM/event.preventCapture">event.preventCapture</a> {{obsolete_inline}}</dt> + <dd>Este método es desaconsejado en favor del estándar <a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation">stopPropagation</a> y ha sido <a href="/es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web" title="es/Los_cambios_en_Gecko_1.9_afectando_a_los_sitios_web">retirado en Gecko 1.9</a>.</dd> + <dt><a href="/es/DOM/event.preventDefault" title="es/DOM/event.preventDefault">event.preventDefault</a> </dt> + <dd>Cancela el evento (si éste es anulable).</dd> + <dt><a href="/es/DOM/event.stopPropagation" title="es/DOM/event.stopPropagation">event.stopPropagation</a> </dt> + <dd>Para la propagación de los eventos más allá en el DOM.</dd> +</dl> diff --git a/files/es/web/api/event/initevent/index.html b/files/es/web/api/event/initevent/index.html new file mode 100644 index 0000000000..360effb8ef --- /dev/null +++ b/files/es/web/api/event/initevent/index.html @@ -0,0 +1,42 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/initEvent +--- +<div>{{ ApiRef("DOM") }}{{deprecated_header}}</div> +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>El método <code>initEvent</code> se usa para dar valor inicial a un <a href="es/DOM/event">evento</a> creado mediante <a href="es/DOM/document.createEvent">document.createEvent</a>.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><em>event</em>.initEvent(<em>type</em>,<em>bubbles</em>,<em>cancelable</em>) +</pre> + +<dl> + <dt><code>type</code></dt> + <dd>El tipo de evento.</dd> + <dt><code>bubbles</code></dt> + <dd>Un valor binario indicando si el evento debe ser recurrente en la cadena de eventos, o no (ver <a href="/es/docs/DOM/event.bubbles">bubbles</a>).</dd> + <dt><code>cancelable</code></dt> + <dd>Un valor binario indicando si el evento puede ser cancelado o no (ver <a href="/es/docs/DOM/event.cancelable">cancelable</a>).</dd> +</dl> + +<p>Nota: Un valor binario puede tener sólo valores 1 y 0. En lógica de Boole, cierto (<em>true</em> ) y falso (<em>false</em> ).</p> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">// crea un evento "click" que puede ser recurrente y +// NO puede ser cancelado. +event.initEvent("click", true, false); +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Los eventos inicializados de esta forma, deben haber sido creados por el método <a href="es/DOM/document.createEvent">document.createEvent</a>. Debemos llamar a <code>initEvent</code> para inicializar el evento antes de que pueda ser lanzado con <a href="es/DOM/element.dispatchEvent">dispatched</a>.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initEvent">DOM Level 2 Events: Event.initEvent</a></p> diff --git a/files/es/web/api/event/preventdefault/index.html b/files/es/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..e0e6ba18b1 --- /dev/null +++ b/files/es/web/api/event/preventdefault/index.html @@ -0,0 +1,95 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/preventDefault +--- +<p>{{ApiRef("DOM")}}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Cancela el evento si este es cancelable, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo.</p> + +<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> + +<pre class="eval"><em>event</em>.preventDefault() +</pre> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<p>Cambiar el estado de una caja de selección es la función por defecto de la acción de hacer clic sobre la caja. Este ejemplo ilustra como hacer que esto no ocurra:</p> + +<pre><html> +<head> +<title>ejemplo de preventDefault</title> + +<script type="text/javascript"> + +function stopDefAction(evt) { + evt.preventDefault(); +} +</script> +</head> + +<body> + +<p>Por favor, haz clic sobre la caja de selección.</p> + +<form> +<input type="checkbox" onclick="stopDefAction(event);"/> +<label for="checkbox">Selección</label> +</form> + +</body> +</html> +</pre> + +<p>Puedes ver <code>preventDefault</code> en acción <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">aquí</a>.</p> + +<p>El siguiente ejemplo demuestra cómo puede evitarse que un texto invalido entre en un campo de formulario mediante preventDefault().</p> + +<pre><html> +<head> +<title>preventDefault example</title> + +<script type="text/javascript"> + +function checkName(evt) { +var charCode = evt.charCode; + + if (charCode != 0) { + if (charCode < 97 || charCode > 122) { + evt.preventDefault(); + alert("Por favor usa sólo letras minúsculas." + "\n" + + "charCode: " + charCode + "\n" + ); + } + } +} + +</script> +</head> + +<body> + +<p>Por favor entra tu nombre en letras minúsculas solamente.</p> +<form> +<input type="text" onkeypress="checkName(event);"/> +</form> + +</body> +</html> +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Llamar a <code>preventDefault</code> en cualquier momento durante la ejecución, cancela el evento, lo que significa que cualquier acción por defecto que deba producirse como resultado de este evento, no ocurrirá.</p> + +<p>Puedes usar <a href="es/DOM/event.cancelable">event.cancelable</a> para comprobar si el evento es cancelable o no. Llamar a <code>preventDefault</code> para un evento no cancelable, no tiene ningún efecto.</p> + +<p><code>preventDefault</code> no detiene las siguientes llamadas al evento producidas en el DOM. En su lugar debería usarse <a href="es/DOM/event.stopPropagation">event.stopPropagation</a> para ese propósito.</p> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></p> diff --git a/files/es/web/api/event/stoppropagation/index.html b/files/es/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..c92c594950 --- /dev/null +++ b/files/es/web/api/event/stoppropagation/index.html @@ -0,0 +1,103 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +translation_of: Web/API/Event/stopPropagation +--- +<div>{{APIRef("DOM")}}</div> + +<p>El método <code>stopPropagation()</code> de la interfaz {{domxref("Event")}} evita la propagación adicional del evento actual en las fases de captura y <em>bubbling</em>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>event</em>.stopPropagation();</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Ver ejemplo 5: <a href="https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Propagación del evento</a> en el capítulo de Ejemplos para un ejemplo mas detallado de este método y la propagación del evento en el DOM.</p> + +<h2 id="Notas">Notas</h2> + +<p>Ver las <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">Especificaciones del DOM</a> para la explicación del flujo del eventos. (El <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">Borrador de eventos del DOM nivel 3</a> tiene una ilustración.)</p> + +<p><a href="/en-US/docs/Web/API/event.preventDefault">preventDefault</a> es un método complementario que puede ser usado para prevenir la acción default del evento cuando este ocurre.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en 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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/es/web/api/event/target/index.html b/files/es/web/api/event/target/index.html new file mode 100644 index 0000000000..1e28aef0b3 --- /dev/null +++ b/files/es/web/api/event/target/index.html @@ -0,0 +1,138 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - Evento + - Propiedad + - Referencia +translation_of: Web/API/Event/target +--- +<p>{{ApiRef("DOM")}}</p> + +<p>La propiedad <code><strong>target</strong></code> de la interfaz del {{domxref("event.currentTarget")}} es una referencia al objeto en el cual se lanzo el evento. Es diferente de {{domxref("event.currentTarget")}} donde el controlador de eventos (event handler) es llamado durante la fase de bubbling or capturing del evento.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">const theTarget = algunEvento.target</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>La propiedad <code>event.target</code> puede ser usada para implementar una <strong>delegación del evento</strong>.</p> + +<pre class="brush: js notranslate">// Crear una lista +const ul = document.createElement('ul'); +document.body.appendChild(ul); + +const li1 = document.createElement('li'); +const li2 = document.createElement('li'); +ul.appendChild(li1); +ul.appendChild(li2); + +function hide(e){ + // e.target se refiere elemento clickado <li> + // Esto es diferente de e.currentTarget, que se referiría al padre <ul> en este contexto + e.target.style.visibility = 'hidden'; +} + +// Incluir el 'listener' a la lista +// Se ejecutará cuando se haga click en cada <li> +ul.addEventListener('click', hide, false); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Especificación</th> + <th>Estado</th> + <th>Comentario</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador"><strong>Compatibilidad del navegador</strong></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</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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 Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> + +<p>En IE 6-8 el evento 'model' es diferente. Los eventos 'listeners' son are incluidos con el método no estándar {{domxref('EventTarget.attachEvent')}}. En este modelo, el evento 'object' tiene una propiedad {{domxref('Event.srcElement')}}, en vez de la propiedad <code>target</code>, y tiene la misma semántica que <code>event.target</code>.</p> + +<pre class="brush: js notranslate">function hide(e) { + // Soporte en IE6-8 + var target = e.target || e.srcElement; + target.style.visibility = 'hidden'; +} +</pre> + +<h2 id="También_ver">También ver</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets"> Comparación de los Eventos</a></li> +</ul> diff --git a/files/es/web/api/event/type/index.html b/files/es/web/api/event/type/index.html new file mode 100644 index 0000000000..7f9f02f6e9 --- /dev/null +++ b/files/es/web/api/event/type/index.html @@ -0,0 +1,103 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Evento + - Propiedad + - Referencia +translation_of: Web/API/Event/type +--- +<div>{{APIRef}}</div> + +<p>La propiedad de sólo-lectura <code><strong>Event.type</strong></code> devuelve una cadena de texto que contiene el tipo de evento. Se establece cuando se contruye el evento y es el nombre que se utiliza normalmente para referirse al evento en cuestión, como <code>click</code>, <code>load</code> o <code>error</code>.</p> + +<p>El argumento <code>event</code> de {{ domxref("EventTarget.addEventListener()") }} y {{ domxref("EventTarget.removeEventListener()") }} no es sensible a mayúsculas.</p> + +<p>Para una lista de tipos de evento displonibles, vea la <a href="/es/docs/Web/Reference/Events">referencia de eventos</a></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">event.type +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + + <title>Event.type Example</title> + + <script> + var currEvent; + function getEvtType(evt) { + console.group(); + + currEvent = evt.type; + console.log(currEvent); + + document.getElementById("Etype").innerHTML = currEvent; + + console.groupEnd(); + } + + // Eventos de teclado + document.addEventListener("keypress", getEvtType, false); //[second] + + document.addEventListener("keydown", getEvtType, false); //first + document.addEventListener("keyup", getEvtType, false); //third + + // Eventos de ratón + document.addEventListener("click", getEvtType, false); // third + + document.addEventListener("mousedown", getEvtType, false); //first + document.addEventListener("mouseup", getEvtType, false); //second + + </script> +</head> + +<body> + +<p>Press any key or click the mouse to get the event type.</p> +<p>Event type: <span id="Etype" style="color:red">-</span></p> + +</body> +</html> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<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('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("api.Event.type")}}</p> |