jQuery 이벤트
- 이전 페이지 jQuery 선택자
- 다음 페이지 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 이벤트 참조 매뉴얼。
- 이전 페이지 jQuery 선택자
- 다음 페이지 jQuery 숨기기/보이기