---
title: keydown
slug: Web/API/Document/keydown_event
tags:
  - Evento
  - keydown
translation_of: Web/API/Document/keydown_event
---
<p>El evento <code>keydown</code> se produce cuando se presiona una tecla.</p>

<p>A diferencia del evento <code><a href="/en-US/docs/Web/Events/keypress">keypress</a></code>, el evento <code>keydown</code> es producido por todas las teclas, independientemente de si estas son caracteres o no.</p>

<h2 id="Información_general">Información general</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Especificación</dt>
 <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt>
 <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="/en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">Burbuja</dt>
 <dd style="margin: 0 0 0 120px;">Si</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">Si</dd>
 <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt>
 <dd style="margin: 0 0 0 120px;">Document, Element</dd>
 <dt style="float: left; text-align: right; width: 120px;">Acción</dt>
 <dd style="margin: 0 0 0 120px;">Varía: evento <code>keypress</code>; lanza el sistema de composición de texto; eventos <code>blur</code> y <code>focus</code>; <code>DOMActivate</code> evento; otro evento</dd>
</dl>

<h2 id="Propiedades">Propiedades</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Property</th>
   <th scope="col">Type</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>target</code> {{readonlyInline}}</td>
   <td>EventTarget</td>
   <td>The event target (the topmost target in the DOM tree).</td>
  </tr>
  <tr>
   <td><code>type</code> {{readonlyInline}}</td>
   <td>DOMString</td>
   <td>The type of event.</td>
  </tr>
  <tr>
   <td><code>bubbles</code> {{readonlyInline}}</td>
   <td>Boolean</td>
   <td>Whether the event normally bubbles or not</td>
  </tr>
  <tr>
   <td><code>cancelable</code> {{readonlyInline}}</td>
   <td>Boolean</td>
   <td>Whether the event is cancellable or not?</td>
  </tr>
  <tr>
   <td><code>view</code> {{readonlyInline}}</td>
   <td>WindowProxy</td>
   <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td>
  </tr>
  <tr>
   <td><code>detail</code> {{readonlyInline}}</td>
   <td><code>long</code> (<code>float</code>)</td>
   <td>0.</td>
  </tr>
  <tr>
   <td><code>target</code> {{readonlyInline}}</td>
   <td>EventTarget (DOM element)</td>
   <td>Focused element processing the key event, root element if no suitable input element focused.</td>
  </tr>
  <tr>
   <td><code>char</code> {{readonlyInline}}</td>
   <td>DOMString (string)</td>
   <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail.
    <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div>
   </td>
  </tr>
  <tr>
   <td><code>key</code> {{readonlyInline}}</td>
   <td>DOMString (string)</td>
   <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td>
  </tr>
  <tr>
   <td><code>charCode</code> {{readonlyInline}}</td>
   <td>Unsigned long (int)</td>
   <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div>
   </td>
  </tr>
  <tr>
   <td><code>keyCode</code> {{readonlyInline}}</td>
   <td>Unsigned long (int)</td>
   <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0.
    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
   </td>
  </tr>
  <tr>
   <td><code>which</code> {{readonlyInline}}</td>
   <td>Unsigned long (int)</td>
   <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>.
    <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div>
   </td>
  </tr>
  <tr>
   <td><code>location</code> {{readonlyInline}}</td>
   <td>long (float)</td>
   <td>The location of the key on the device.</td>
  </tr>
  <tr>
   <td><code>repeat</code> {{readonlyInline}}</td>
   <td>boolean</td>
   <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td>
  </tr>
  <tr>
   <td><code>locale</code> {{readonlyInline}}</td>
   <td>string</td>
   <td>The language code for the key event, if available; otherwise, the empty string.</td>
  </tr>
  <tr>
   <td><code>ctrlKey</code> {{readonlyInline}}</td>
   <td>boolean</td>
   <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td>
  </tr>
  <tr>
   <td><code>shiftKey</code> {{readonlyInline}}</td>
   <td>boolean</td>
   <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td>
  </tr>
  <tr>
   <td><code>altKey</code> {{readonlyInline}}</td>
   <td>boolean</td>
   <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td>
  </tr>
  <tr>
   <td><code>metaKey</code> {{readonlyInline}}</td>
   <td>boolean</td>
   <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td>
  </tr>
 </tbody>
</table>

<h2 id="preventDefault_del_evento_keydown"><code>preventDefault()</code> del evento <code>keydown</code></h2>

<p>Empezando desde Gecko 25, una llamada a <code>preventDefault()</code> del evento <code>keydown</code> impide la emisión del consiguiente evento <code>keypress</code>. Este es un comportamiento válido para la especificación D3E y otros navegadores importantes que se comportan de esta misma forma. Por otro lado, Gecko 24 y anteriores emiten el evento <code>keypress</code> aunque se haya llamado a <code>preventDefault()</code> del evento <code>keydown</code> predecesor. Aunque el atributo <code>defaultPrevented</code> del evento <code>keypress</code> sea <code>true</code> en este caso.</p>

<h2 id="Eventos_relacionados">Eventos relacionados</h2>

<ul>
 <li>{{event("keydown")}}</li>
 <li>{{event("keyup")}}</li>
 <li>{{event("keypress")}}</li>
 <li>{{event("input")}}</li>
</ul>

<h2 id="Ejemplo">Ejemplo</h2>

<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script&gt;

'use strict';

document.addEventListener('keydown', (event) =&gt; {
  const keyName = event.key;
  alert('keydown event\n\n' + 'key: ' + keyName);
});

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>