aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web')
-rw-r--r--files/ko/web/api/element/select_event/index.html76
1 files changed, 76 insertions, 0 deletions
diff --git a/files/ko/web/api/element/select_event/index.html b/files/ko/web/api/element/select_event/index.html
new file mode 100644
index 0000000000..87dd62fa4a
--- /dev/null
+++ b/files/ko/web/api/element/select_event/index.html
@@ -0,0 +1,76 @@
+---
+title: 'Element: select event'
+slug: Web/API/Element/select_event
+translation_of: Web/API/Element/select_event
+---
+<div>{{APIRef}}</div>
+
+<p><strong><code>select</code></strong> 이벤트는 어떤 텍스트가 선택되었을 때 발생됩니다.</p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th>Bubbles</th>
+ <td>Yes</td>
+ </tr>
+ <tr>
+ <th>Cancelable</th>
+ <td>No</td>
+ </tr>
+ <tr>
+ <th>Interface</th>
+ <td>유저 인터페이스로부터 발생된 경우 {{domxref("UIEvent")}}, 아니라면 {{domxref("Event")}}</td>
+ </tr>
+ <tr>
+ <th>Event handler property</th>
+ <td>{{domxref("GlobalEventHandlers.onselect", "onselect")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>The event is not available for all elements in all languages. For example, in HTML, <code>select</code> events can be dispatched only on form <code>{{HtmlElement('input/text', '&lt;input type="text"&gt;')}}</code> and {{HtmlElement("textarea")}} elements.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Selection_logger">Selection logger</h3>
+
+<pre class="brush: html notranslate">&lt;input value="Try selecting some text in this element."&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<pre class="brush: js notranslate">function logSelection(event) {
+ const log = document.getElementById('log');
+ const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
+ log.textContent = `You selected: ${selection}`;
+}
+
+const input = document.querySelector('input');
+input.addEventListener('select', logSelection);</pre>
+
+<p>{{EmbedLiveSample("Selection_logger")}}</p>
+
+<h3 id="onselect_equivalent">onselect equivalent</h3>
+
+<p>You can also set up the event handler using the {{domxref("GlobalEventHandlers.onselect", "onselect")}} property:</p>
+
+<pre class="brush: js notranslate">input.onselect = logSelection;</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('UI Events', '#event-type-select', 'select')}}</td>
+ <td>{{Spec2('UI Events')}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Element.select_event")}}</p>