jQuery 제이쿼리의 Events 방식
[jQuery Events]
jQuery는 맞춤형으로 event를 핸들링할 수 있습니다.
[jQuery Event Functions]
jQuery 이벤트 핸들링 메소드는 jQuery의 핵심 함수입니다.
이벤트 핸들러는 HTML에서 "어떤 일이 생겼을 때" 호출되는 메소드입니다.
"어떤 이벤트가 발생했을 때“(보통 영어로 ‘triggered(or fired) by an event’)라는 말이 자주 사용됩니다.
보통 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>Click me</button>
</body>
</html>
첫 강좌에서 봤던 위의 예제에서는 버튼을 클릭하는 이벤트가 일어났을 때 함수가 호출됩니다.
$(“button").click(function(){...블라블라...})
이 메소드는 모든 <p> 엘리먼트를 감추는 일을 했죠.
$(“p").hide();
[별도 파일로 jQuery 함수 관리하기]
웹사이트가 수많은 페이지로 만들어졌고 손수 코딩한 jQuery 함수들을 관리하기 쉽게 하려면, 별도의 .js 파일에다 자신의 jQuery 함수를 넣으면 됩니다.
지금까지의 예제에서는 함수들을 <head> 부분에 직접 입력을 했지만, 때로는 별도 파일에 이 함수들을 넣어두는 것이 좋습니다. 아래처럼요.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
[jQuery Name Conflicts]
jQuery는 단축표시로 $를 사용합니다.
어떤 javascript 라이브러리에서도 역시 $표시를 사용하고 있습니다.
jQuery의 noConflict() 메소드를 사용하면 자신이 원하는 어떤 다른(예를 들어, jq) 이름으로 $표시를 대체할 수 있습니다.
[jQuery Events]
jQuery 이벤트에 사용되는 몇가지 예를 알려드립니다.
$(document).ready(function) → 문서 로딩이 끝났을 때 호출
$(selector).click(function) → 선택된 엘리먼트를 클릭했을 때 호출
$(selector).dblclick(function) → 선택된 엘리먼트를 더블클릭했을 때 호출
$(selector).focus(function) → 선택된 엘리먼트에 포커싱이 됐을 때 호출
$(selector).mouseover(function) → 선택된 엘리먼트에 마우스오버했을 때 호출
감사합니다.
출처를 밝힙니다.
http://blog.naver.com/topsaga?Redirect=Log&logNo=140155602632
'☆코딩개발' 카테고리의 다른 글
| jQuery 제이쿼리의 Callback 함수 (0) | 2013.03.04 |
|---|---|
| jQuery 제이쿼리의 이펙트 방식 II (0) | 2013.03.04 |
| jQuery 제이쿼리의 이펙트 방식 (0) | 2013.03.04 |
| jQuery 제이쿼리의 Selectors를 소개합니다. (0) | 2013.03.04 |
| jQuery 제이쿼리의 문법에 대해서 알아봅시다. (0) | 2013.03.04 |
| jQuery 제이쿼리 시작해볼까요. (0) | 2013.03.04 |