지난 강습에는 jquery 의 기본 설정 및 로딩 이벤트를 바인딩하는 법에 대해 간단히 다루었다.
이번에는 클릭이벤트를 다는 법~에 대해 간단히 다루어 보도록 하겠다.
jquery 기본 syntax>
$(셀렉터).action()
$(document).ready(function(){});
지난 시간 이 구문도 같은 원리이다. document 가 로드되어 dom 을 사용할수 있게 되었을때 function 안에 구문이 동작하라는 의미이다.
click event syntax>
$(셀렉터).click(실행될 function)
위와 같은 방식으로 클릭 이벤트를 해당 객체에 바인딩할 수 있다.
단~ 지난번 내용인 로딩 이벤트 안 또는 다른 이벤트 실행 이후에 바인딩해야 한다.
이유는 스크립트는 컴파일이 미리 되어있지 않은 언어이기 때문에 순차적으로 실행한다.
로딩 이벤트에 처리 안했다면 다음과 같은 상황이 된다.
코드로는 다음과 같다.
방법 A.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery basic</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$("#clickBtn").click(function(){
alert("버튼 클릭");
});
</script>
</head>
<body>
<input type="button" id="clickBtn" value="버튼" />
</body>
</html>
방법 B.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery basic</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<input type="button" id="clickBtn" value="버튼" />
</body>
<script type="text/javascript">
$("#clickBtn").click(function(){
alert("버튼 클릭");
});
</script>
</html>
방법 A 의 경우에는 script 동작 시점에 버튼을 찾지 못했기 때문에 바인딩할 요소가 없어서 이벤트가 바인딩 되지 않는다.
방법 B 의 경우는 button 객체 생성이후이기 때문에 바인딩이 된다.
이러한 차이가 없이 프로그래밍하기 위해서는 로딩완료 시점에 바인딩을 해주면 된다.
$(function(){
$("#clickBtn").click(function(){
alert("버튼 클릭");
});
});
여기서 또 하나~!
버튼을 선택하기 위해서 #clickBtn 을 사용하였는데 이를 셀렉터라고 한다.
우선 이번에는 간단히 이야기하자면
# 을 붙이면 id 를 가르킨다.
즉 clickBtn 이라는 id 를 가진 요소에 이벤트를 달았다고 생각하면 된다.
다음 장에서는 셀렉터에 대해 이야기 하도록 해보자.
'IT > jquery' 카테고리의 다른 글
| [제이쿼리(jQuery)] lesson 5 (0) | 2014.11.24 |
|---|---|
| [제이쿼리(jQuery)] lesson 4 (0) | 2014.11.24 |
| [제이쿼리(jQuery)] lesson 3 (0) | 2014.11.24 |
| [제이쿼리(jQuery)] lesson 1 (0) | 2014.11.24 |
| JQuery의 when (0) | 2014.11.21 |