evento

  • Enlace amigable (slug) de la revisión: DOM/event
  • Título de la revisión: evento
  • Id de la revisión: 136149
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario /* La interfaz evento (<code>Event</code>) de DOM */

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "DOM:event", "en" ])}}

« Referencia DOM de Gecko

{{template.DomRef()}}

Introducción

Éste capítulo describe el modelo de evento del nivel 2 del DOM implementado por Gecko. La propia interfaz de Evento es descritas, así como las interfaces para el registro de evento sobre nudos en el DOM, manipuladores y "oyentes" (listeners) de eventos, y varios largos ejemplos que muestran como se relacionan las variadas interfaces de evento con otras.

There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the 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

DOM event handler List

In addition to the event object described here, the Gecko DOM also provides methods for registering event listeners on nodes in the DOM, removing those event listeners, and dispatching events from the DOM. These and the various Event Handlers on HTML or XML elements are the main entry points for events in the DOM. These three methods are described in the DOM Element Reference list.

You can also pass the event object reference as a predefined parameter, named event, to the function that handles the event. This is very similar to the way this works, but for event objects, rather than element object references.

<html>
<head>
<title>event object parameter example</title>

<script type="text/javascript">

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

</script>
</head>

<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>

Using the predefined event object parameter allows you to pass other parameters to the event handling function as well, if required:

<html>
<head>
<title>event object & extra parameters example</title>

<script type="text/javascript">

var par2 = 'hello';
var par3 = 'world!';

function showCoords(evt, p2, p3){
  alert(
    "clientX value: " + evt.clientX + "\n"
    + "clientY value: " + evt.clientY + "\n"
    + "p2: " + p2 + "\n"
    + "p3: " + p3 + "\n"
  );
}

</script>
</head>

<body onmousedown="showCoords(event, par2, par3)">
<p>To display the mouse coordinates please click anywhere on the page.</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 {{template.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 que 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 
Returns the Unicode value of a non-character key in a keypress event or any key in any other type of keyboard event.
event.layerX 
Returns the horizontal coordinate of the event relative to the current layer.
event.layerY 
Returns the vertical coordinate of the event relative to the current layer.
event.metaKey 
Returns a boolean indicating whether the meta key was pressed during the event.
event.originalTarget 
The original target of the event, before any retargetings (Mozilla-specific).
event.pageX 
Returns the horizontal coordinate of the event relative to the page.
event.pageY 
Returns the vertical coorindate of the event relative to the page.
event.relatedTarget 
Identifies a secondary target for the event.
event.screenX 
Returns the horizontal position of the event on the screen.
event.screenY 
Returns the vertical position of the event on the screen.
event.shiftKey 
Returns a boolean indicating whether the <shift> key was pressed when the event was fired.
event.target 
Returns a reference to the target to which the event was originally dispatched.
event.timeStamp 
Devuelve el momento de creación del evento.
event.type 
Returns the name of the event (case-insensitive).
event.view 
The view attribute identifies the AbstractView from which the event was generated.
event.which 
Returns the Unicode value of a key in a keyboard event, regardless of which type of key is pressed.

Métodos

event.initEvent 
Initializes the value of an Event created through the DocumentEvent interface.
event.initKeyEvent 
Initializes a keyboard event. Gecko-specific.
event.initMouseEvent 
Initializes a mouse event once it's been created
event.initUIEvent 
Initializes a UI event once it's been created.
event.preventBubble 
{{template.Obsolete_inline()}} Prevents the event from bubbling. This method is deprecated in favor of standard stopPropagation and is removed in Gecko 1.9.
event.preventCapture 
{{template.Obsolete_inline()}} This method is deprecated in favor of standard stopPropagation and is removed in Gecko 1.9.
event.preventDefault 
Cancels the event (if it is cancelable).
event.stopPropagation 
Stops the propagation of events further along in the DOM.
{{ wiki.languages( { "en": "en/DOM/event", "fr": "fr/DOM/event", "pl": "pl/DOM/event" } ) }}

Fuente de la revisión

<p>
{{wiki.template('Traducción', [ "inglés", "DOM:event", "en" ])}}
</p><p>« <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a>
</p><p>{{template.DomRef()}}
</p>
<h3 name="Introducci.C3.B3n"> Introducción </h3>
<p>Éste capítulo describe el modelo de evento del nivel 2 del DOM implementado por <a href="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 descritas, así como las interfaces para el registro de evento sobre nudos en el DOM, manipuladores y "oyentes" (<code>listeners</code>) de eventos, y varios largos ejemplos que muestran como se relacionan las variadas interfaces de evento con otras.
</p><p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <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 <i>foo</i>. 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">Ejemplo 5: Propagación de evento</a>
</p>
<h4 name="DOM_event_handler_List"> DOM event handler List </h4>
<p>In addition to the <code>event</code> object described here, the Gecko DOM also provides methods for registering event listeners on nodes in the DOM, removing those event listeners, and dispatching events from the DOM. These and the various <a href="es/DOM/element#Event_Handlers">Event Handlers</a> on HTML or XML elements are the main entry points for events in the DOM. These three methods are described in the <a href="es/DOM/element">DOM Element Reference</a> list.
</p><p>You can also pass the event object reference as a predefined parameter, named <code>event</code>, to the function that handles the event. This is very similar to the way <code>this</code> works, but for event objects, rather than element object references.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;event object parameter example&lt;/title&gt;

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

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

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

&lt;body onmousedown="showCoords(event)"&gt;
&lt;p&gt;To display the mouse coordinates click anywhere on the page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Using the predefined <code>event</code> object parameter allows you to pass other parameters to the event handling function as well, if required:
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;event object &amp; extra parameters example&lt;/title&gt;

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

var par2 = 'hello';
var par3 = 'world!';

function showCoords(evt, p2, p3){
  alert(
    "clientX value: " + evt.clientX + "\n"
    + "clientY value: " + evt.clientY + "\n"
    + "p2: " + p2 + "\n"
    + "p3: " + p3 + "\n"
  );
}

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

&lt;body onmousedown="showCoords(event, par2, par3)"&gt;
&lt;p&gt;To display the mouse coordinates please click anywhere on the page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h3 name="Propiedades"> Propiedades </h3>
<dl><dt> <a href="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">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">event.button</a> </dt><dd> Devuelve el botón del ratón.
</dd><dt> <a href="es/DOM/event.cancelBubble">event.cancelBubble</a> {{template.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">event.cancelable</a> </dt><dd> Devuelve un valor que indica si el evento se puede cancelar.
</dd><dt> <a href="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">keypress</a>.
</dd><dt> <a href="es/DOM/event.clientX">event.clientX</a> </dt><dd> Devuelve la posición horizontal del evento.
</dd><dt> <a href="es/DOM/event.clientY">event.clientY</a> </dt><dd> Devuelve la posición vertical del evento.
</dd><dt> <a href="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">event.currentTarget</a> </dt><dd> Devuelve una referencia al objetivo actual registrado para el evento.
</dd><dt> <a href="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">event.eventPhase</a> </dt><dd> Utilizado para indicar que fase del flujo del evento es actualmente en proceso de evaluación.
</dd><dt> <a href="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">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">event.keyCode</a> </dt><dd> Returns the Unicode value of a non-character key in a <a href="es/DOM/event/keypress">keypress</a> event or any key in any other type of keyboard event.
</dd><dt> <a href="es/DOM/event.layerX">event.layerX</a> </dt><dd> Returns the horizontal coordinate of the event relative to the current layer.
</dd><dt> <a href="es/DOM/event.layerY">event.layerY</a> </dt><dd> Returns the vertical coordinate of the event relative to the current layer.
</dd><dt> <a href="es/DOM/event.metaKey">event.metaKey</a> </dt><dd> Returns a boolean indicating whether the <code>meta</code> key was pressed during the event.
</dd><dt> <a href="es/DOM/event.originalTarget">event.originalTarget</a> </dt><dd> The original target of the event, before any retargetings (Mozilla-specific).
</dd><dt> <a href="es/DOM/event.pageX">event.pageX</a> </dt><dd> Returns the horizontal coordinate of the event relative to the page.
</dd><dt> <a href="es/DOM/event.pageY">event.pageY</a> </dt><dd> Returns the vertical coorindate of the event relative to the page.
</dd><dt> <a href="es/DOM/event.relatedTarget">event.relatedTarget</a> </dt><dd> Identifies a secondary target for the event.
</dd><dt> <a href="es/DOM/event.screenX">event.screenX</a> </dt><dd> Returns the horizontal position of the event on the screen.
</dd><dt> <a href="es/DOM/event.screenY">event.screenY</a> </dt><dd> Returns the vertical position of the event on the screen.
</dd><dt> <a href="es/DOM/event.shiftKey">event.shiftKey</a> </dt><dd> Returns a boolean indicating whether the <code>&lt;shift&gt;</code> key was pressed when the event was fired.
</dd><dt> <a href="es/DOM/event.target">event.target</a> </dt><dd> Returns a reference to the target to which the event was originally dispatched.
</dd><dt> <a href="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">event.type</a> </dt><dd> Returns the name of the event (case-insensitive).
</dd><dt> <a href="es/DOM/event.view">event.view</a> </dt><dd> The view attribute identifies the <code>AbstractView</code> from which the event was generated.
</dd><dt> <a href="es/DOM/event.which">event.which</a> </dt><dd> Returns the Unicode value of a key in a keyboard event, regardless of which type of key is pressed.
</dd></dl>
<h3 name="M.C3.A9todos"> Métodos </h3>
<dl><dt> <a href="es/DOM/event.initEvent">event.initEvent</a> </dt><dd> Initializes the value of an Event created through the <code>DocumentEvent</code> interface.
</dd><dt> <a href="es/DOM/event.initKeyEvent">event.initKeyEvent</a> </dt><dd> Initializes a keyboard event. Gecko-specific.
</dd><dt> <a href="es/DOM/event.initMouseEvent">event.initMouseEvent</a> </dt><dd> Initializes a mouse event once it's been created
</dd><dt> <a href="es/DOM/event.initUIEvent">event.initUIEvent</a> </dt><dd> Initializes a UI event once it's been created.
</dd><dt> <a href="es/DOM/event.preventBubble">event.preventBubble</a> </dt><dd> {{template.Obsolete_inline()}} Prevents the event from bubbling. This method is deprecated in favor of standard <a href="es/DOM/event.stopPropagation">stopPropagation</a> and is <a href="es/Gecko_1.9_Changes_affecting_websites">removed in Gecko 1.9</a>.
</dd><dt> <a href="es/DOM/event.preventCapture">event.preventCapture</a> </dt><dd> {{template.Obsolete_inline()}} This method is deprecated in favor of standard <a href="es/DOM/event.stopPropagation">stopPropagation</a> and is <a href="es/Gecko_1.9_Changes_affecting_websites">removed in Gecko 1.9</a>.
</dd><dt> <a href="es/DOM/event.preventDefault">event.preventDefault</a> </dt><dd> Cancels the event (if it is cancelable).
</dd><dt> <a href="es/DOM/event.stopPropagation">event.stopPropagation</a> </dt><dd> Stops the propagation of events further along in the DOM.
</dd></dl>
{{ wiki.languages( { "en": "en/DOM/event", "fr": "fr/DOM/event", "pl": "pl/DOM/event" } ) }}
Revertir a esta revisión