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
|
---
title: Events and the DOM
slug: Web/API/Document_Object_Model/Events
translation_of: Web/API/Document_Object_Model/Events
---
<div>{{DefaultAPISidebar("DOM")}}</div>
<h2 id="Introduction" name="Introduction">소개</h2>
<p>이 장에서는 DOM 이벤트 모델을 설명한다. <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a> 인터페이스는 DOM의 노드에서 이벤트 등록 및 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>를 위한 인터페이스와 더불어 다양한 이벤트 인터페이스가 서로 어떻게 관련되는지 보여주는 몇 가지 더 긴 예와 함께 설명된다.</p>
<p>There is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p>
<p>Also see <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Example 5: Event Propagation</a> in the Examples chapter for a more detailed example of how events move through the DOM.</p>
<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Event listener등록</h2>
<p>DOM 요소에 대한 이벤트 핸들러를 등록하는 방법에는 3가지가 있다.</p>
<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3>
<pre class="brush: js notranslate">// Assuming myButton is a button element
myButton.addEventListener('click', greet, false)
function greet(event){
// print and have a look at the event object
// always print arguments in case of overlooking any other arguments
console.log('greet:', arguments)
alert('hello world')
}
</pre>
<p>이 방식은 근대의 웹페이지에서 사용해야하는 방법이다.</p>
<div class="blockIndicator note">
<p><strong>Note:</strong> Internet Explorer 6–8 didn't support this method, offering a similar {{domxref("EventTarget.attachEvent")}} API instead. For cross-browser compatibility, use one of the many JavaScript libraries available.</p>
</div>
<p>더 자세한 내용은{{domxref("EventTarget.addEventListener")}}를 참조하세요.</p>
<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">HTML </a>속성</h3>
<pre class="brush: html notranslate"><button onclick="alert('Hello world!')">
</pre>
<p>속성에서 JavaScript 코드는 이벤트 매개변수를 통해 이벤트 객체를 통과합니다. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">반환 값은 HTML 사양에 설명된 특별한 방법으로 처리됩니다.</a></p>
<div class="blockIndicator warning">
<p><strong>경고:</strong> 이 방법은 피해야 합니다! 그것은 마크업을 부풀리고, 읽기 어렵게 만듭니다. 내용/구조와 행동에 대한 우려는 잘 분리되어 있지 않아 버그를 찾기가 더 어려워집니다.</p>
</div>
<h3 id="DOM_element_properties" name="DOM_element_properties">DOM 요소 특성</h3>
<pre class="brush: js notranslate">// Assuming myButton is a button element
myButton.onclick = function(event){alert('Hello world')}
</pre>
<p>The function can be defined to take an <code>event</code> parameter. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">The return value is treated in a special way, described in the HTML specification</a>.</p>
<p>The problem with this method is that only one handler can be set per element and per event.</p>
<h2 id="Accessing_Event_interfaces">Accessing Event interfaces</h2>
<p>Event handlers may be attached to various objects (including DOM elements, document, the {{domxref("window")}} object, etc.). When an event occurs, an event object is created and passed sequentially to the event listeners.</p>
<p>The {{domxref("Event")}} interface is accessible from within the handler function, via the event object passed as the first argument. The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.</p>
<pre class="brush: js notranslate">function print(evt) {
// the evt parameter is automatically assigned the event object
// take care of the differences between console.log & alert
console.log('print:', evt)
alert(evt)
}
// any function should have an appropriate name, that's what called semantic
table_el.onclick = print
</pre>
<h2 id="Subnav">Subnav</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
<li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
<li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
<li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
</ul>
|
