files/ko/web/api/event/preventdefault/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

---
title: event.preventDefault
slug: Web/API/Event/preventDefault
translation_of: Web/API/Event/preventDefault
---
<p>{{ ApiRef() }}</p>

<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">개요</h3>

<p>이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.</p>

<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">구문</h3>

<pre class="eval"><em>event</em>.preventDefault()
</pre>

<h3 id=".E4.BE.8B" name=".E4.BE.8B">예제</h3>

<p>다음의 예제에서는 체크박스를 클릭했을 때 발생하는 동작을 멈추는 방법을 살펴보겠습니다. </p>

<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;preventDefault 예제&lt;/title&gt;

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

function stopDefAction(evt) {
  evt.preventDefault();
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;체크박스 컨트롤을 클릭해 주세요&lt;/p&gt;

&lt;form&gt;
&lt;input type="checkbox" onclick="stopDefAction(event);"/&gt;
&lt;label for="checkbox"&gt;체크박스&lt;/label&gt;
&lt;/form&gt;

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

<p><code>preventDefault의 예제를 </code><a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;">여기</a><code>에서 확인할 수 있습니다.</code></p>

<p>아래의 예제에서는, preventDefault() 를 사용해서 올바르지 않은 텍스트가 입력란에 입력되는것을 막는 방법을 설명하고 있습니다.</p>

<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;preventDefault 예제&lt;/title&gt;

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

function checkName(evt) {
var charCode = evt.charCode;

  if (charCode != 0) {
    if (charCode &lt; 97 || charCode &gt; 122) {
      evt.preventDefault();
      alert("소문자만 입력할 수 있습니다." + "\n"
            + "charCode: " + charCode + "\n"
      );
    }
  }
}

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

&lt;body&gt;

&lt;p&gt;당신의 이름을 소문자만으로 입력해주세요.&lt;/p&gt;
&lt;form&gt;
&lt;input type="text" onkeypress="checkName(event);"/&gt;
&lt;/form&gt;

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

<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">주의</h3>

<p>이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.</p>

<p>이벤트의 취소가능 여부는 <a href="/ko/DOM/event.cancelable" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.cancelable">event.cancelable</a>를 사용해서 확인할 수 있습니다. 취소불가능한 이벤트에 대해서 preventDefault를 호출해도 결과는 없습니다.</p>

<p>preventDefault는 DOM을 통한 이벤트의 전파를 막지않습니다. 전파를 막을때는 <a href="/ko/docs/Web/API/Event/stopPropagation" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;" title="ko/DOM/event.stopPropagation">event.stopPropagation</a>를 사용해주세요.</p>

<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">사양</h3>

<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-preventDefault">DOM Level 2 Events: preventDefault</a></p>