---
title: keydown
slug: Web/API/Document/keydown_event
translation_of: Web/API/Document/keydown_event
---
<p><code>keydown</code> 이벤트늘 키가 눌렸을 때 발생합니다.</p>

<h2 id="General_info">General info</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Specification</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;">Interface</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;">Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">Yes</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">Yes</dd>
 <dt style="float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">Document, Element</dd>
 <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
 <dd style="margin: 0 0 0 120px;">Varies: <code>keypress</code> event; launch text composition system; <code>blur</code> and <code>focus</code> events; <code>DOMActivate</code> event; other event</dd>
</dl>

<h2 id="Properties">Properties</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()_of_keydown_event"><code>preventDefault()</code> of <code>keydown</code> event</h2>

<p>Starting with Gecko 25, a call of <code>preventDefault()</code> of <code>keydown</code> event prevents to dispatch following <code>keypress</code> event. This is valid behavior for D3E spec and the other major web browsers behave so. On the other hand, Gecko 24 or earlier dispatched <code>keypress</code> event even if <code>preventDefault()</code> of preceding <code>keydown</code> event is called. Although the <code>keypress</code> event's <code>defaultPrevented</code> attribute was <code>true</code> in this case.</p>

<h2 id="Related_Events">Related Events</h2>

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