======jQuery Event Methods======
<WRAP left notice 70%>
  * description : jQuery Event Methods
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-15
</WRAP>
<WRAP clear></WRAP>
\\
%%jQuery%%는 %%HTML%% 페이지의 이벤트에 응답하도록 맞춤 제작되었습니다.\\

=====What are Events?=====
웹 페이지가 응답할 수 있는 다양한 방문자들이 하는 모든 행동(actions)을 이벤트라고 합니다.\\
\\
이벤트는 어떤 일이 발생하는 정확한 순간을 나타냅니다.
\\
예제:\\
  * 요소 위로 마우스 이동
  * 라디오 버튼 선택
  * 요소 클릭
"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>

=====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>













{{tag>오션 jQuery Event Methods}}