evento

  • Enlace amigable (slug) de la revisión: DOM/event
  • Título de la revisión: evento
  • Id de la revisión: 136157
  • Creada:
  • Creador: cesardelahoz
  • ¿Es la revisión actual? No
  • Comentario 17 words added, 12 words removed; page display name changed to 'evento'

Contenido de la revisión

{{ Traducción("inglés", "DOM:event", "en") }}

« Referencia DOM de Gecko

Introducción

Éste capítulo describe el Modelo De Evento DOM de nivel 2 como es implementado por Gecko. La propia interfaz de Evento es descrita, así como las interfaces para el registro de evento sobre los nodos en el DOM, manipuladores y "oyentes" (listeners) de eventos, y varios ejemplos mas extensos que muestran como las varias interfaces de evento se relacionan unas  con las otras.

Hay un diagrama excelente que claramente explica las tres fases del flujo de eventos a través del DOM en el DOM Level 3 Events draft.

La interfaz evento (Event) de DOM

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" (listeners) autorizadas para la gestión del evento. La interfaz Event del DOM es entonces accesible por la función de manejo, vía el objeto de evento puesto como el primer (y único) argumento.

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. 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.

El parámetro "evt" no es pasado en el código de abajo, el objeto de evento es cambiado automáticamente a foo. Todo lo necesario es definir un parámetro en el gestor de evento para recibir el objeto de evento.

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;

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.

Para más detalles de como los eventos se mueven dentro del DOM, ver: Ejemplo 5: Propagación de evento

Lista de los gestores de evento del DOM

Además del objeto event 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.

Estos y los varios manejos de eventos 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 referencia al elemento.

Puede también pasar la referencia del objeto del evento como un parámetro predefinido, llamado event, a la función que maneja el evento. Esto es muy parecido a la forma en que trabaja this, pero para objetos de eventos, más bien que las referencias del objeto del elemento.

<html>
<head>
<title>Ejemplo de parámetro de objeto de evento</title>

<script type="text/javascript">

function showCoords(evento){
  alert(
    "clientX value: " + event.clientX + "\n" +
    "clientY value: " + event.clientY + "\n"
  );
}

</script>
</head>

<body onmousedown="showCoords(evento)">
<p>Para ver las coordinadas del ratón
haga clic en cualquier lugar de esta página.</p>
</body>
</html>

El parámetro predefinido del objeto event permite pasar tantos parámetros de gestión de evento como sea necesario:

<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>

Propiedades

event.altKey 
Devuelve un valor indicando si la tecla <alt> fue pulsada durante el evento.
event.bubbles 
Devuelve un valor que indica si el evento se propaga hacia arriba a través del DOM o no.
event.button 
Devuelve el botón del ratón.
event.cancelBubble {{ Desaprobado_texto() }} 
Devuelve un valor que indica si la propagación hacia arriba fue cancelada o no.
event.cancelable 
Devuelve un valor que indica si el evento se puede cancelar.
event.charCode 
Devuelve el valor Unicode de una tecla de carácter que fue apretada como parte de un evento keypress.
event.clientX 
Devuelve la posición horizontal del evento.
event.clientY 
Devuelve la posición vertical del evento.
event.ctrlKey 
Devuelve un valor que indica si la tecla <Ctrl> fue apretada durante el evento.
event.currentTarget 
Devuelve una referencia al objetivo actual registrado para el evento.
event.detail 
Devuelve detalles sobre el evento, dependiendo del tipo de evento.
event.eventPhase 
Utilizado para indicar qué fase del flujo del evento es actualmente en proceso de evaluación.
event.explicitOriginalTarget 
El objetivo del evento (específico a Mozilla).
event.isChar 
Devuelve un valor que indica si el evento produce o no una tecla de carácter.
event.keyCode 
Devuelve el valor Unicode de una tecla que no es caracter en un evento keypress o cualquier tecla en cualquier otro tipo de evento de teclado.
event.layerX 
Devuelve la coordenada horizontal del evento relativo a la capa actual.
event.layerY 
Devuelve la coordenada vertical del evento relativo a la capa actual.
event.metaKey 
Devuelve un valor booleano indicando si la meta tecla fue presionada durante un evento.
event.originalTarget 
El objetivo principal de un evento, antes de cualquier reapunte (Especifiación Mozilla).
event.pageX 
Devuelve la coordenada horizontal del evento, relativo al documento completo.
event.pageY 
Devuelve la coordenada vertical del evento, relativo al documento completo.
event.relatedTarget 
Identifica un objetivo secundario para el evento.
event.screenX 
Devuelve la coordenada horizontal del evento en la pantalla.
event.screenY 
Devuelve la coordenada vertical del evento en la pantalla.
event.shiftKey 
Devuelve un valor booleano indicando si la tecla <shift> fue presionada cuando el evento fue disparado.
event.target 
Devuelve una referencia al objetivo en la cual el evento fue originalmente enviado.
event.timeStamp 
Devuelve el momento de creación del evento.
event.type 
Devuelve el nombre del evento (distingue mayúsculas y minúsculas).
event.view 
El atributo vista identifica la AbstractView del cual el evento fue generado.
event.which 
Devuelve el valor Unicode de la tecla en un evento del teclado, sin importar el tipo de tecla que se presionó.

Métodos

event.initEvent 
Inicia el valor de un evento que se ha creado vía la interfaz DocumentEvent.
event.initKeyEvent 
Inicia un evento del teclado. (Específico de Gecko).
event.initMouseEvent 
Inicia un evento del ratón una vez que se ha creado.
event.initUIEvent 
Inicia un evento de la interfaz de usuario (UI) una vez que se ha creado.
event.preventBubble {{ Obsoleto_texto() }} 
Previene la expansión del evento. Este método es desaconsejado en favor del estándar stopPropagation y ha sido retirado en Gecko 1.9.
event.preventCapture {{ Obsoleto_texto() }} 
Este método es desaconsejado en favor del estándar stopPropagation y ha sido retirado en Gecko 1.9.
event.preventDefault 
Cancela el evento (si éste es anulable).
event.stopPropagation 
Para la propagación de los eventos más allá en el DOM.

{{ languages( { "en": "en/DOM/event", "fr": "fr/DOM/event", "ja": "ja/DOM/event", "pl": "pl/DOM/event" } ) }}

Fuente de la revisión

<p>{{ Traducción("inglés", "DOM:event", "en") }}</p>
<p>« <a href="/es/Referencia_DOM_de_Gecko" title="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a></p>
<h3 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 claramente explica 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 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 &lt;code&gt;event&lt;/code&gt; 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 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>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Ejemplo de parámetro de objeto de evento&lt;/title&gt;

&lt;script type="text/javascript"&gt;

function showCoords(evento){
  alert(
    "clientX value: " + event.clientX + "\n" +
    "clientY value: " + event.clientY + "\n"
  );
}

&lt;/script&gt;
&lt;/head&gt;

&lt;body onmousedown="showCoords(evento)"&gt;
&lt;p&gt;Para ver las coordinadas del ratón
haga clic en cualquier lugar de esta página.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</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>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Ejemplo de objeto con varios parámetros&lt;/title&gt;

&lt;script type="text/javascript"&gt;

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"
  );
}

&lt;/script&gt;
&lt;/head&gt;

&lt;body onmousedown="muestraCoords(event, par2, par3)"&gt;
&lt;p&gt;Para ver las coordinadas del ratón
haga clic en cualquier lugar de esta página.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 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>&lt;alt&gt;</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> {{ Desaprobado_texto() }} </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>&lt;Ctrl&gt;</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>&lt;shift&gt;</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 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> {{ Obsoleto_texto() }} </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> {{ Obsoleto_texto() }} </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>

<p>{{ languages( { "en": "en/DOM/event", "fr": "fr/DOM/event", "ja": "ja/DOM/event", "pl": "pl/DOM/event" } ) }}</p>
Revertir a esta revisión