jQuery 이벤트

jQuery는 이벤트 처리를 위해 특별히 설계되었습니다。

jQuery 이벤트 함수

jQuery 이벤트 처리 메서드는 jQuery의 핵심 함수입니다。

이벤트 처리 프로그램은 HTML에서 특정 이벤트가 발생할 때 호출되는 메서드를 의미합니다. 이벤트가 '트리거' (또는 '발생')된다라는 용어가 자주 사용됩니다。

일반적으로 jQuery 코드를 <head> 부분의 이벤트 처리 메서드에 넣습니다:

예제

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>이는 제목입니다</h2>
<p>이는 문단입니다.</p>
<p>이는 또 다른 문단입니다.</p>
<button>클릭하세요</button>
</body>
</html>

본인이 직접 시도해 보세요

위의 예제에서, 버튼의 클릭 이벤트가 발생할 때 함수가 호출됩니다:

$("button").click(function() {  // some code... } )

이 메서드는 모든 <p> 요소를 숨깁니다:

$("p").hide();

단일 파일 중의 함수

만약 여러분의 웹사이트가 많은 페이지를 포함하고 있으며 jQuery 함수를 유지보수하기 쉽게 하고 싶다면, 여러분의 jQuery 함수를 독립적인 .js 파일에 넣으세요.

jQuery를 설명하는 강의에서는 함수를 <head> 부분에 직접 추가합니다. 그러나 별도의 파일에 저장하는 것이 더 좋습니다. 예를 들어, 이렇게 src 속성을 사용하여 파일을 참조할 수 있습니다:():

예제

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 이름 충돌

jQuery는 $ 기호를 jQuery의 단축 방식으로 사용합니다。

일부 다른 JavaScript 라이브러리의 함수(예: Prototype)도 $ 기호를 사용합니다。

jQuery는 noConflict() 메서드를 사용하여 이 문제를 해결합니다。

var jq=jQuery.noConflict(),$ 기호 대신 자신의 이름(예: jq)으로 사용할 수 있도록 도와줍니다。

본인이 직접 시도해 보세요

결론

jQuery는 HTML 이벤트를 처리하기 위해 특별히 설계되었기 때문에, 다음 원칙을 따르면 코드가 더 적절하며 유지보수가 더 쉬워집니다:

  • 모든 jQuery 코드를 이벤트 처리 함수에 넣습니다
  • 모든 이벤트 처리 함수를 문서 준비 이벤트 처리기에 넣습니다
  • jQuery 코드를 별도의 .js 파일에 넣습니다
  • 이름 충돌이 있으면 jQuery 라이브러리를 다시 이름 지정

jQuery 이벤트

아래는 jQuery 이벤트 메서드의 몇 가지 예제입니다:

이벤트 함수 함수를 바인딩
$(document).ready(function) 문서가 로드되면 발생하는 준비 이벤트에 함수를 바인딩
$(selector).click(function) 클릭 이벤트에 트리거하거나 함수를 바인딩
$(selector).dblclick(function) 더블 클릭 이벤트에 트리거하거나 함수를 바인딩
$(selector).focus(function) 포커스 이벤트에 트리거하거나 함수를 바인딩
$(selector).mouseover(function) 마우스 오버 이벤트에 트리거하거나 함수를 바인딩

완전한 참조 매뉴얼을 보려면, 우리의 jQuery 이벤트 참조 매뉴얼