차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:javascript_note:js_events [2021/04/12 12:41]
emblim98 만듦
+++ wiki:javascript:javascript_note:js_events [2023/01/13 18:44] (현재)
@@ 줄 8: / 줄 8: @@
 <WRAP clear></WRAP>
 \\
-======HTML Events ======
+===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}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구