차이

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

--- wiki:javascript:jquery:jquery_note:jquery_events [2021/04/15 12:07]
emblim98 만듦
+++ wiki:javascript:jquery:jquery_note:jquery_events [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ======jQuery Event Methods======
-<WRAP left notice 80%>
+<WRAP left notice 70%>
   * description : jQuery Event Methods
   * author      : 오션
@@ 줄 14: / 줄 14: @@
 \\
 이벤트는 어떤 일이 발생하는 정확한 순간을 나타냅니다.
+\\
+예제:\\
+  * 요소 위로 마우스 이동
+  * 라디오 버튼 선택
+  * 요소 클릭
+"fires / fired"라는 용어는 종종 이벤트와 함께 사용됩니다. 예 : "키 누르기 이벤트는 키를 누르는 순간 시작됩니다."\\
+\\
+다음은 몇 가지 일반적인 %%DOM%% 이벤트입니다.\\
+\\
+^ Mouse Events  ^ Keyboard Events  | Form Events  ^ Document/Window Events  ^
+| click         | keypress         | submit       | load                    |
+| dblclick      | keydown          | change       | resize                  |
+| mouseenter    | keyup            | focus        | scroll                  |
+| mouseleave    |                  | blur         | unload                  |
-예 :
+=====jQuery Syntax For Event Methods=====
+%%jQuery%%에서, 대부분의 %%DOM%% 이벤트에는 동일한 %%jQuery%% 메서드가 있습니다.\\
+\\
+페이지의 모든 단락에 클릭 이벤트를 지정하려면, 다음을 수행하십시오.\\
+<code jquery>
+$("p").click();
+</code>
+\\
+다음 단계는 이벤트가 발생할 때 어떤 일이 발생해야 하는지 정의하는 것입니다.\\
+이벤트에 함수를 전달해야 합니다.\\
+\\
+<code jquery>
+$("p").click(function() {
+  // action goes here!!
+});
+</code>
+\\
+======Commonly Used jQuery Event Methods======
+=====$(document).ready()=====
+''%%$(document).ready()%%'' 메서드를 사용하면 문서가 완전히 로딩되었을 때, 함수를 실행할 수 있습니다.\\
+이 이벤트는 jQuery Syntax 챕터에서 이미 설명되어 있습니다.\\
+\\
+=====click()=====
+''%%click()%%'' 메서드는 이벤트 핸들러 함수를 %%HTML%% 요소에 연결합니다.\\
+\\
+사용자가 %%HTML%% 요소를 클릭하면, 함수가 실행됩니다.\\
+\\
+다음 예제는 다음과 같습니다: 클릭 이벤트가 ''%%<p>%%'' 요소에서 발생하는 경우; 현재 ''%%<p>%%'' 요소를 숨깁니다.\\
-요소 위로 마우스 이동
+====예제====
-라디오 버튼 선택
+<code jquery>
-요소 클릭
+    $(document).ready(function () {
-"발사 / 발사"라는 용어는 종종 이벤트와 함께 사용됩니다. 예 : "키 누르기 이벤트는 키를 누르는 순간 시작됩니다."
+      $("p").click(function () {
+        $(this).hide();
+      });
+    });
+</code>
-다음은 몇 가지 일반적인 DOM 이벤트입니다.
+=====dblclick()=====
+''%%dblclick()%%'' 메서드는 이벤트 핸들러 함수를 %%HTML%% 요소에 연결합니다.\\
+\\
+이 함수는 사용자가 %%HTML%% 요소를 더블 클릭하면 실행됩니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("p").dblclick(function () {
+        $(this).hide();
+      });
+    });
+</code>
+=====mouseenter()=====
+''%%mouseenter()%%'' 메서드는 이벤트 핸들러 함수를 %%HTML%% 요소에 연결합니다.\\
+\\
+이 함수는 마우스 포인터가 %%HTML%% 요소에 들어갈 때 실행됩니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("#p1").mouseenter(function () {
+        alert("You entered p1!");
+      });
+    });
+</code>
+=====mouseleave()=====
+%%mouseleave()%% 메서드는 이벤트 핸들러 함수를 %%HTML%% 요소에 연결합니다.\\
+\\
+이 함수는 마우스 포인터가 %%HTML%% 요소를 떠날 때 실행됩니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("#p1").mouseleave(function () {
+        alert("Bye! You now leave p1!");
+      });
+    });
+</code>
+=====mousedown()=====
+''%%mousedown()%%'' 메서드는 이벤트 핸들러 함수를 %%HTML%% 요소에 연결합니다.\\
+\\
+이 함수는 마우스가 %%HTML%% 요소 위에 있는 동안, 왼쪽, 가운데 또는 오른쪽 마우스 버튼이 눌렸을 때 실행됩니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("#p1").mousedown(function () {
+        alert("Mouse down over p1!");
+      });
+    });
+</code>
+=====mouseup()=====
+%%mouseup()%% 메서드는 이벤트 핸들러 함수를 %%HTML%% 요소에 연결합니다.\\
+\\
+이 함수는 마우스가 %%HTML%% 요소 위에 있는 동안, 왼쪽, 가운데 또는 오른쪽 마우스 버튼을 놓으면 함수가 실행됩니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("#p1").mouseup(function () {
+        alert("Mouse up over p1!");
+      });
+    });
+</code>
+=====hover()=====
+%%hover()%% 메서드는 두 가지 함수를 가지며, %%mouseenter()%% 및 %%mouseleave()%% 메서드의 조합입니다.\\
+\\
+첫 번째 함수는 마우스가 %%HTML%% 요소에 들어갈 때 실행되고, 두 번째 함수는 마우스가 %%HTML%% 요소를 떠날 때 실행됩니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("#p1").hover(function () {
+        alert("You entered p1!");
+      },
+        function () {
+          alert("Bye! You now leave p1!");
+        });
+    });
+</code>
+=====focus()=====
+%%focus()%% 메서드는 %%HTML%% 폼(form, 양식) 필드에 이벤트 핸들러 함수를 첨부합니다.\\
+\\
+이 함수는 폼 필드에 포커스가 있을 때 실행됩니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("input").focus(function () {
+        $(this).css("background-color", "yellow");
+      });
+      $("input").blur(function () {
+        $(this).css("background-color", "green");
+      });
+    });
+</code>
+=====blur()=====
+''%%blur()%%'' 메서드는 %%HTML%% 폼 필드에 이벤트 핸들러 함수를 첨부합니다.\\
+\\
+이 함수는 폼 필드가 포커스를 잃을 때 실행됩니다.\\
+====예제====
+<code jquery>
+$("input").blur(function() {
+  $(this).css("background-color", "#ffffff");
+});
+</code>
+======The on() Method======
+%%on()%% 메서드는 선택한 요소에 대해 하나 이상의 이벤트 핸들러를 연결합니다.\\
+\\
+클릭 이벤트를 ''%%<p>%%'' 요소에 연결합니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("p").on("click", function () {
+        $(this).hide();
+      });
+    });
+</code>
+\\
+여러 이벤트 핸들러를 ''%%<p>%%'' 요소에 연결합니다.\\
+====예제====
+<code jquery>
+    $(document).ready(function () {
+      $("p").on({
+        mouseenter: function () {
+          $(this).css("background-color", "lightgray");
+        },
+        mouseleave: function () {
+          $(this).css("background-color", "lightblue");
+        },
+        click: function () {
+          $(this).css("background-color", "yellow");
+        }
+      });
+    });
+</code>

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

사용자 도구

사이트 도구

차이

문서 도구