======JavaScript Events======
<WRAP left notice 80%>
  * description : JavaScript Events
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-12
</WRAP>
<WRAP clear></WRAP>
\\
===Ref===
[[https://www.w3schools.com/js/js_events.asp|JavaScript Events]]
\\
%%HTML%% 이벤트는 %%HTML%% 요소에 발생하는 것 입니다.\\
\\
%%HTML%% 페이지에서 %%JavaScript%%가 사용되는 경우, %%JavaScript%%는 이러한 이벤트에 대해 **"반응 (react)"**할 수 있습니다.\\

=====HTML Events=====
%%HTML%% 이벤트는 브라우저가 수행하는 작업이거나 사용자가 수행하는 작업일 수 있습니다.\\
\\
다음은 HTML 이벤트의 몇 가지 예입니다:\\
  * %%HTML%% 웹 페이지의 로딩이 완료되었습니다.
  * HTML 입력 필드가 변경되었습니다.
  * HTML 버튼을 클릭했습니다.
종종 이벤트가 발생하면, 무언가를 하고 싶을 수 있습니다.\\
\\
%%JavaScript%%를 사용하면 이벤트가 감지될 때 코드를 실행할 수 있습니다.\\
\\
%%HTML%%을 사용하면 **%%JavaScript%% 코드**가 있는 __이벤트 핸들러 속성__(event handler attributes)을 %%HTML%% 요소에 추가 할 수 있습니다.\\

작은 따옴표 사용:\\
<code html>
<element event = 'some JavaScript'>
</code>

큰 따옴표 사용:\\
<code html>
<element event="some JavaScript">
</code>

다음의 예제에서,코드가 있는 ''%%onclick%%'' 속성은 ''%%<button>%%'' 요소에 추가합니다.\\

====예제====
<code javascript>
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
</code>

위의 예제에서, %%JavaScript%%는 id="demo"를 가진 요소의 콘텐츠를 변경합니다.\\
\\
다음 예제에서, 코드는 ''%%this.innerHTML%%''를 사용하여 자체 요소의 콘텐츠를 변경합니다.\\

====예제====
<code javascript>
<button onclick="this.innerHTML = Date()">The time is?</button>
</code>

%%JavaScript%% 코드는 종종 몇 줄로 되어 있습니다. 함수를 호출하는 이벤트 속성을 보는 것이 더 일반적입니다.\\
====예제====
<code javascript>
<button onclick="displayDate()">The time is?</button>
</code>

=====Common HTML Events=====
다음은 몇 가지 일반적인 HTML 이벤트 목록입니다.\\
| Event        | Description                                    |
^ onchange     ^ HTML 요소가 변경되었습니다.                      ^
| onclick      | 사용자가 HTML 요소를 클릭합니다.                 |
^ onmouseover  ^ 사용자가 HTML 요소 위로 마우스를 이동합니다.      ^
| onmouseout   | 사용자가 HTML 요소에서 마우스를 멀리 이동합니다.  |
^ onkeydown    ^ 사용자가 키보드 키를 누릅니다.                   ^
| onload       | 브라우저가 페이지 로딩을 완료했습니다.            |
\\
이외의 HTML 이벤트 목록은 [[https://www.w3schools.com/jsref/dom_obj_event.asp|W3Schools JavaScript Reference HTML DOM Events]]를 참조하세요.\\

=====What can JavaScript Do?=====
이벤트 핸들러를 사용하여 __사용자 입력__(user input), __사용자 작업__(user actions) 및 __브라우저 작업__(browser actions)을 처리하고 확인할 수 있습니다.\\
  * 페이지가 로딩될 때마다 수행해야 하는 작업
  * 페이지를 닫을 때 해야 할 일
  * 사용자가 버튼을 클릭할 때 수행되어야 하는 작업
  * 사용자가 데이터를 입력할 때, 확인되어야하는 콘텐츠
  * 그리고 더 ...

%%JavaScript%%가 이벤트와 함께 작동하도록 하기 위해 다양한 방법을 사용할 수 있습니다.\\
  * %%HTML%% 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다.
  * %%HTML%% 이벤트 속성은 JavaScript 함수를 호출할 수 있습니다.
  * %%HTML%% 요소에 고유한 이벤트 핸들러 함수를 할당할 수 있습니다.
  * 이벤트가 전송되거나 처리되지 않도록 방지할 수 있습니다.
  * 그리고 더 ...

%%HTML DOM%% 챕터에서, 이벤트와 이벤트 핸들러에 대해 더 많이 배울 것입니다.\\

{{tag>오션 Javascript Events}}