diff options
Diffstat (limited to 'files/ko/web/api')
-rw-r--r-- | files/ko/web/api/element/select_event/index.html | 76 |
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', '<input type="text">')}}</code> and {{HtmlElement("textarea")}} elements.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Selection_logger">Selection logger</h3> + +<pre class="brush: html notranslate"><input value="Try selecting some text in this element."> +<p id="log"></p></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> |