diff options
Diffstat (limited to 'files/es/web/api/event/index.html')
| -rw-r--r-- | files/es/web/api/event/index.html | 185 |
1 files changed, 185 insertions, 0 deletions
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> |